HighCharts之2D堆条状图

1、HighCharts之2D堆条状图源码

StackedBar.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(){
	 $('#stackedBarChart').highcharts({
		 chart: {
             type: 'bar'
         },
         title: {
             text: '堆条状图'
         },
         xAxis: {
             categories: ['苹果', '橘子', '梨子', '葡萄', '香蕉']
         },
         yAxis: {
             min: 0,
             title: {
                 text: '水果销量'
             }
         },
         legend: {
             backgroundColor: '#FFFFFF',
             reversed: true
         },
         plotOptions: {
             series: {
                 stacking: 'normal'
             }
         },
             series: [{
             name: '星期一',
             data: [50, 34, 45, 77, 28]
         }, {
             name: '星期二',
             data: [92, 32, 43, 22, 61]
         }, {
             name: '星期三',
             data: [83, 44, 54, 12, 59]
         }, {
             name: '星期四',
             data: [63, 94, 67, 23, 12]
         }, {
             name: '星期五',
             data: [57, 64, 24, 37, 98]
         }, {
             name: '星期六',
             data: [34, 12, 44, 65, 32]
         }, {
             name: '星期日',
             data: [67, 47, 23, 96, 23]
         }]
     });
  });
</script>
</head>
<body>
   <div id="stackedBarChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

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

  1. HighCharts之2D条状图

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

  2. HighCharts之2D堆面积图

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

  3. HighCharts之2D堆柱状图

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

  4. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  5. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  6. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

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

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

  8. Flex实现双轴条状图

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

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

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

随机推荐

  1. 单元测试系列：Mock工具之Mockito实战

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6780719.html 在实际项目中写单 ...

  2. 洛谷 [P3398] 仓鼠找sugar

    树剖求LCA 我们可以发现,两条路径ab,cd相交,当且仅当 dep[lca(a,b)]>=dep[lca(c,d)]&(lca(lca(a,b),c)==lca(a,b)||lca(l ...

  3. CF 741D. Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths [dsu on tree 类似点分治]

    D. Arpa's letter-marked tree and Mehrdad's Dokhtar-kosh paths CF741D 题意: 一棵有根树,边上有字母a~v,求每个子树中最长的边,满 ...

  4. python函数4种类型及函数生成帮助文档

    Pyouthon中函数参数是引用传递(注意不是值传递). 对于不可变类型,因变量不能修改,所以运算不会影响到变量自身: 而对于可变类型来说,函数体中的运算有可能会更改传入的参数变量. a += a   ...

  5. 6.C++初步分析类

    面向对象的意义在于: -将日常生活中习惯的思维方式引入程序设计中 -将需求中的慨念直观的映射到解决方案中 -以模块为中心构建可复用的软件系统 -提高软件产品的可维护性和可扩展性 其中类和对象是面向对象 ...

  6. Eclipse Java，debug模式无法调试，调试按钮不可用时解决办法

    经常出现debug模式进入后,debug的几个按钮置灰,F5,6,8,没有任何反应时,这样操作: 退出 Eclipse.打开 Eclipse 目录下的 configuration 下的 org.ecl ...

  7. 05-Git

    [Git]   [安装git] $ yum install git  #安装git $ ssh-keygen  #遇到输入符直接回车 $ cat ~/.ssh/id_rsa.pub #将这里的信息添加 ...

  8. PHP的 first day of 和 last day of

    话不多说,先上代码(当前是2017年6月2日) echo date("Y-m-d", strtotime("2017-02 first day of")).'& ...

  9. iOS7动态调整文字大小

    iOS7添加了动态调整文字的大小,app可以通过接受通知的方式进行设置 iOS 7 introduces Dynamic Type, which makes it easy to display gr ...

  10. springmvc log4j 配置

    web.xml 增加 <context-param> <param-name>log4jConfigLocation</param-name> <param- ...