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. 从一道Python面试题说起（大神勿入）

    作为一个自学Python的小白,在了解了点皮毛之后,便按捺不住自己内心的骚动,在某招聘网站上投了些简历,居然也收到了面试邀请.第二天到公司,HR废话不多讲,上来就抛出几张A4纸,"先做题吧, ...

  2. iOS-AFNetworking封装Get(自定义HTTP Header)和Post请求及文件下载

    前面提到AFNetworking是一个很强大的网络三方库,首先你需要引入AFNetworking三方库:如封装的有误还请指出,谢谢! 1.Get请求 /**Get请求 url 服务器请求地址 succ ...

  3. CDlinux制作U盘启动盘，打造自己的口袋系统

    工具: 1.8G或以上U盘一枚: 2.CDlinux0.9.7.1镜像文件,注意其他版本不一定能成功(传送门http://pan.baidu.com/s/1o7P6Gu2): 3.UltraISO或U ...

  4. 洛谷 [P1282] 多米诺骨牌

    这道题是一道背包问题,考虑一个背包, 显然如果我们直接设dp[i]表示前i个使差值最小所需的最少翻转次数,是具有后效性的. 所以我们将直接求最值,改为求某个值是否可行,这种求最值转变为求可行性的思想是 ...

  5. Codeforces 250 E. The Child and Binary Tree [多项式开根 生成函数]

    CF Round250 E. The Child and Binary Tree 题意:n种权值集合C, 求点权值和为1...m的二叉树的个数, 形态不同的二叉树不同. 也就是说:不带标号,孩子有序 ...

  6. js事件机制

    js事件属性:

  7. 一个开源的强类型客户端（.NET 中的 Open Fegin）— Rabbit Go

    在做RabbitCloud(之前是一个RPC,现在是一个微服务框架)的时候往往避不开客户端代理,之前把这些客户端代理都算作服务框架不可缺少的一部分,随着后期的深入发现这些客户端代理其实可以互通,类似s ...

  8. 软件开发：网站＆视频&书籍推荐（不断更新）

    利用书籍进行系统学习,凭借博客/新闻等资料开阔眼界,辅之以代码及项目实战,并勤加以总结,方可进步. 常用网站: Leetcode刷题:https://leetcode.com/ ,练习数据结构和算法必 ...

  9. Hexo博客框架

    https://hexo.io/docs/#What-is-Hexo hexo博客应用1 hexo博客应用2 Spark Streaming 消费kafka到HDFS 搭建篇-使用Github-hex ...

  10. 【应知应会】15个常用的JavaScript字符串操作方法

    1 初始化 //常用初始化方法 var stringVal = "hello iFat3"; //构造函数创建方法 var stringObj = new String(" ...