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. 将excel文件内容存储到数据库，并可以实时在前端查看（不必生成文件）

    版权声明:本文为博主原创文章,未经博主允许不得转载 本文主要讲前端内容,后端涉及较少,可以认为是使用Java. 首先是excel文件上传,这个较为简单,可以html5的数据接口FormData()进行 ...

  2. 【原创】Hibernate通过实体类自动建表时type=MyISAM的问题

    ι 版权声明:本文为博主原创文章,未经博主允许不得转载. 当使用的mysql数据库为5.5版本时,方言需要设置为 <property name="hibernate.dialect&q ...

  3. Effective Java 之-----静态工厂与构造器

    一. 考虑用静态工厂方法代替构造器: 1)静态工厂方法与构造器不同的第一大优势在于:他们有名称.当一个类需要多个带有相同签名的构造器时,就用静态方法代替构造器,并慎重的选择名称以突出他们间的区别: 2 ...

  4. 23_迭代器、模拟For循环

    一.可迭代对象 和 迭代器 1.可迭代对象和迭代器 可迭代对象:可以直接作用于for循环的对象统称为可迭代对象,Iterable. 迭代器:可以被next()函数调用并不断返回下一个值的对象称为迭代器 ...

  5. Trusted Execution Technology (TXT) --- 启动控制策略（LCP）篇

    版权声明:本文为博主原创文章,未经博主允许不得转载.http://www.cnblogs.com/tsec/p/8428631.html 在TXT平台中,启动控制策略(Launch Control P ...

  6. Facebook发布React 16 专利条款改为MIT开源协议

    9 月 26 日,用于构建 UI 的 JavaScript 库 React 16 的最新版本上线. Facebook 最终在现有的两种 React 版本中选择了出现 bug 概率最少的一款.这次版本更 ...

  7. Spring国际化

    国际化(Internationalization)有时候被简称为i18n,因为有18个字母在国际化的英文单词的字母i和n之间.Spring对国际化的支持示例如下所示. 需要将spring.tld放到工 ...

  8. BZOJ 3990: [SDOI2015]排序 [搜索]

    3990: [SDOI2015]排序 题意:\(2^n\)的一个排列,给你n种操作,第i种把每\(2^{i-1}\)个数看成一段,交换任意两段.问是这个序列有序的操作方案数,两个操作序列不同,当且仅当 ...

  9. CF266D. BerDonalds [图的绝对中心]

    D. BerDonalds time limit per test 5 seconds memory limit per test 256 megabytes input standard input ...

  10. Windows上MongoDB的安装

    下载 下载MongoDB,自然是在他的官网下载相应系统的版本了,我下载的是Windows的安装包. 安装 傻瓜式安装,不多说.(默认安装在C盘的.) 启动 mongodb的数据存在一个叫data 文件 ...