HighCharts之2D条状图

1、HighCharts之2D条状图源码

bar.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D条状图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
	 $('#barChart').highcharts({
		 chart: {
             type: 'bar'
         },
         title: {
             text: '2014年某一周水果销售量'
         },
         subtitle: {
             text: ''
         },
         xAxis: {
             categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日'],
             title: {
                 text: '星期'
             }
         },
         yAxis: {
             min: 0,
             title: {
                 text: '数量',
                 align: 'high'
             },
             labels: {
                 overflow: 'justify'
             }
         },
         tooltip: {
             valueSuffix: ' kg'
         },
         plotOptions: {
             bar: {
                 dataLabels: {
                     enabled: true
                 }
             }
         },
         legend: {
             layout: 'vertical',
             align: 'right',
             verticalAlign: 'top',
             x: -40,
             y: 100,
             floating: true,
             borderWidth: 1,
             backgroundColor: '#CCCCCC',
             shadow: true
         },
         credits: {
             enabled: true
         },
         series: [{
             name: '苹果',
             data: [1070, 3198, 6353, 2035, 8745]
         }, {
             name: '橘子',
             data: [9330, 1560, 9470, 4080, 6784]
         }, {
             name: '梨子',
             data: [2735, 9140, 4054, 7329, 3478]
         }]
     });
  });
</script>
</head>
<body>
   <div id="barChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

HighCharts之2D条状图的更多相关文章

  1. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

  2. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  3. Excel 2010高级应用-条状图（五）

    Excel 2010高级应用-条状图(五) 基本操作如下: 1.新建一个Excel空白文档,并命名条状图 2.单击"插入",找到条状图的样图 3.选择其中一种类型的条状图样图,在空 ...

  4. Flex实现双轴条状图

    1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...

  5. python中matplotlib绘图封装类之折线图、条状图、圆饼图

    DrawHelper.py封装类源码: import matplotlib import matplotlib.pyplot as plt import numpy as np class DrawH ...

  6. highcharts柱状图、饼状图

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  7. 利用js来画图形（例如：条状图，圆饼图等）

    背景:java开发的过程中,需要对数据进行可视化,这样方便客户理解此时的数据状态 语言:java,js,window7,echarts包文件 sample的例子下面的参照 https://www.ec ...

  8. MS Chart 条状图【转】

    private void Form1_Load(object sender, EventArgs e) {            string sql1 = "select  类别,coun ...

  9. maplotlib python 玩具绘图 横向纵向条状图

    from matplotlib import font_manager#解决zh-han图形汉字乱码 my_font = font_manager.FontProperties(fname=" ...

随机推荐

  1. 基于Controller接口的控制器及简单应用

    DispatcherServlet在Spring当中充当一个前端控制器的角色,它的核心功能是分发请求.请求会被分发给对应处理的Java类,Spring MVC中称为Handle.在Spring 2.5 ...

  2. Django的ModelForm

    基于django.forms.ModelForm:与模型类绑定的Form 先定义一个ModelForm类,继承ModelForm类 from django.forms import ModelForm ...

  3. 对把JDK源码的一些注解，笔记

    //对treeMap的红黑树理解注解. 2017.02.16 by 何锦彬 JDK,1.7.51 /** From CLR */ private void fixAfterInsertion(Entr ...

  4. P1045 麦森数

    别问我为什么要写水题 #include <iostream> #include <cstdio> #include <cstring> #include <a ...

  5. 夏令营讲课内容整理 Day 3.

    本日主要内容是树与图.   1.树 树的性质 树的遍历 树的LCA 树上前缀和   树的基本性质: 对于一棵有n个节点的树,必定有n-1条边.任意两个点之间的路径是唯一确定的.   回到题目上,如果题 ...

  6. ASP.NET Core 入门

    关于ASP.NET Core ASP.NET Core 是一个全新的开源.跨平台框架,可以用它来构建基于网络连接的现代云应用程序,比如:Web 应用,IoT(Internet Of Things,物联 ...

  7. js压缩上传图片

    初学有不当之处,请多多指点, <body> <div class="cc"> <input type="file" id=&quo ...

  8. table内容强制换行

    为防止文字过长而撑坏表格,一般我们需要通过css使td中内容强制换行.分别给table和td加一条样式即可实现: <meta charset="utf-8"> < ...

  9. java thread 线程锁同步，锁，通信

    12.线程同步 当多个线程访问同一个数据时,非常容易出现线程安全问题.这时候就需要用线程同步 Case:银行取钱问题,有以下步骤: A.用户输入账户.密码,系统判断是否登录成功 B.用户输入取款金额 ...

  10. java多线程编程——锁优化

    并发环境下进行编程时,需要使用锁机制来同步多线程间的操作,保证共享资源的互斥访问.加锁会带来性能上的损坏,似乎是众所周知的事情.然而,加锁本身不会带来多少的性能消耗,性能主要是在线程的获取锁的过程.如 ...