HighCharts之2D堆柱状图

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

Stacked.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(){
	 $('#stackedChart').highcharts({
		 chart: {
             type: 'column'
         },
         title: {
             text: '堆柱状图'
         },
         xAxis: {
             categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日']
         },
         yAxis: {
             min: 0,
             title: {
                 text: '水果销量'
             },
             stackLabels: {
                 enabled: true,
                 style: {
                     fontWeight: 'bold',
                     color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                 }
             }
         },
         legend: {
             align: 'right',
             x: -70,
             verticalAlign: 'top',
             y: 20,
             floating: true,
             backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
             borderColor: '#CCC',
             borderWidth: 1,
             shadow: false
         },
         tooltip: {
             formatter: function() {
                 return '<b>'+ this.x +'</b><br/>'+
                     this.series.name +': '+ this.y +'<br/>'+
                     'Total: '+ this.point.stackTotal;
             }
         },
         plotOptions: {
             column: {
                 stacking: 'normal',
                 dataLabels: {
                     enabled: true,
                     color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                     style: {
                         textShadow: '0 0 3px black, 0 0 3px black'
                     }
                 }
             }
         },
         series: [{
             name: '苹果',
             data: [58, 31, 49, 12, 35,65,98]
         }, {
             name: '梨子',
             data: [12, 45, 63, 24, 17,87,35]
         }, {
             name: '桃子',
             data: [67, 89, 47, 27, 58,67,34]
         }, {
             name: '橘子',
             data: [54, 36, 78, 64, 35,78,94]
         }]
     });
  });
</script>
</head>
<body>
   <div id="stackedChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

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

  1. HighCharts之2D堆面积图

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

  2. HighCharts之2D堆条状图

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

  3. HighCharts之2D柱状图

    1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...

  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. HighCharts之2D数值带有百分数的面积图

    HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...

  8. HighCharts之2D含有负值的面积图

    HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...

  9. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

随机推荐

  1. VSFTPD 源码安装升级

    /usr/local/sbin/vsd -v cp /usr/local/sbin/vsd /usr/sbin/vsd 制作启动脚本 vim /etc/xinetd.d/vsd disable = y ...

  2. HTTP就是这么简单

    为什么要学HTTP? 我们绝大多数的Web应用都是基于HTTP来进行开发的.我们对Web的操作都是通过HTTP协议来进行传输数据的. 简单来说,HTTP协议就是客户端和服务器交互的一种通迅的格式. H ...

  3. Tensorflow简单CNN实现

    觉得有用的话,欢迎一起讨论相互学习~Follow Me 少说废话多写代码~ """转换图像数据格式时需要将它们的颜色空间变为灰度空间,将图像尺寸修改为同一尺寸,并将标签依 ...

  4. Centos6.5离线安装lsb_release

    参考 http://www.linuxfromscratch.org/blfs/view/systemd/postlfs/lsb-release.html首先在其他电脑下载lsb_release源码地 ...

  5. ext4 关闭延迟分配

    ext4的延迟分配特性(delalloc)保证文件在磁盘中的连续,提高文件的读写性能,但是却增加了丢数据的概率. Hadoop和HBase中建议将延迟分配特性关闭. 可以使用下面的方法关闭延迟分配 1 ...

  6. 《Web Scraping With Python》Chapter 1的学习笔记

    urllib urllib是python library自带的库,可以直接用. urlopen from urllib.request import urlopen html = urlopen(&q ...

  7. 新版Azure Automation Account 浅析（三） --- 用Runbook管理AAD Application Key

    新版Azure Automation Account 浅析(三) --- 用Runbook管理AAD应用的Key 前篇讲过有一个面向公众的Runbook库,社区和微软一直往其中加入新的Runbook, ...

  8. ECMAScript 6 笔记（二）

    ES6中的基本扩展 一.字符串的扩展 1. 字符的Unicode表示法 用两个双字节的形式表达字符时,如果直接在\u后面跟上超过0xFFFF的数值(比如\u20BB7),JavaScript会理解成\ ...

  9. c++项目范例

    #include<iostream> #include<string.h> #include<stdlib.h> using namespace std; clas ...

  10. 解决无法make uImage的问题

    进入一个uboot目录, 执行make distclean make at91sam9260ek_config make ARCH=arm CROSS_COMPILE=arm-linux- cp to ...