HighCharts之2D堆面积图

1、HighCharts之2D堆面积图源码

StackedArea.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(){
    	 $('#stackedAreaChart').highcharts({
    		 chart: {
                 type: 'area'
             },
             title: {
                 text: '2013年水果销售量'
             },
             subtitle: {
                 text: '水果销量'
             },
             xAxis: {
                 categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
                 tickmarkPlacement: 'on',
                 title: {
                     enabled: false
                 }
             },
             yAxis: {
                 title: {
                     text: '销量(kg)'
                 },
                 labels: {
                     formatter: function() {
                         return this.value / 1000;
                     }
                 }
             },
             tooltip: {
                 shared: true,
                 valueSuffix: ' kg'
             },
             plotOptions: {
                 area: {
                     stacking: 'normal',
                     lineColor: '#666666',
                     lineWidth: 1,
                     marker: {
                         lineWidth: 1,
                         lineColor: '#666666'
                     }
                 }
             },
             series: [{
                 name: '苹果',
                 data: [561, 145, 365, 879, 1245, 345, 268,654,945,451,615,341]
             }, {
                 name: '梨子',
                 data: [306, 207, 451, 654, 354, 245, 874,652,478,984,875,243]
             }, {
                 name: '橘子',
                 data: [156, 421, 214, 754, 410, 623, 894,451,652,874,356,524]
             }, {
                 name: '荔枝',
                 data: [851, 331, 554, 245, 439, 718, 245,653,451,698,321,684]
             }, {
                 name: '草莓',
                 data: [245, 352, 852, 746, 313, 430, 246,895,675,235,654,745]
             }]
         });
     });
</script>
</head>
<body>
   <div id="stackedAreaChart" style="width: 1200px; height: 500px; 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堆柱状图源码 Stacked.html: <!DOCTYPE html> <html> <head> ...

  3. HighCharts之2D条状图

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

  4. Highcharts 连续的堆积面积图

    说明:设置两个柱形图间距为0 Highcharts柱图,设置X轴各Column的间距 plotOption : {    column : {        // 设置每个柱自身的宽度        ...

  5. HighCharts之2D数值带有百分数的面积图

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

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

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

  7. HighCharts之2D面积图

    HighCharts之2D面积图  1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...

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

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

  9. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. CentOS6.9编译安装nginx1.4.7

    1.系统安装开发包组和zlib-devel,关闭iptables [root@bogon ~]# yum groupinstall -y "Development Tools" [ ...

  2. 洛谷 [P2761] 软件补丁问题

    并不是网络流 状压+SPFA 通过题目中的描述及数据范围可知,我们状压当前的漏洞,以每个二进制位表示是否有这个漏洞,并以状压的结果为顶点,以补丁的时间为边跑SPFA即可 #include <io ...

  3. BZOJ 4108: [Wf2015]Catering [上下界费用流]

    4108: [Wf2015]Catering 题意:有一家装备出租公司收到了按照时间顺序排列的n个请求. 这家公司有k个搬运工.每个搬运工可以搬着一套装备按时间顺序去满足一些请求.一个搬运工从第i个请 ...

  4. USACO 状压DP练习[3]

    1725 题意:$m*n:\ m,n \le 12$的牧场,有的格子不能选,相邻不能同时选,求方案数 $f[i][j]$前$i$行当前行选的集合为$j$ #include <iostream&g ...

  5. POJ 2409 Let it Bead [置换群 Polya]

    传送门 题意:$m$种颜色$n$颗珠子,定义旋转和翻转两种置换,求不等价着色数 暴力求每个置换的循环节也许会$T?$ 我们可以发现一些规律: 翻转: $n$为奇数时每个置换有$1+\frac{n-1} ...

  6. ASP.NET Core 2.0 : 四. _Layout与_ViewStart

    本章我们新建一个项目,并通过这个项目熟悉一下_Layout与_ViewStart. 新建一个项目 首先, 文件->新建一个解决方案 选择.Net Core 的APP下面的ASP.NET Core ...

  7. WPF: WPF 中的 Triggers 和 VisualStateManager

    在之前写的这篇文章 WPF: 只读依赖属性的介绍与实践 中,我们介绍了在 WPF 自定义控件中如何添加只读依赖属性,并且使其结合属性触发器 (Trigger) 来实现对控件样式的改变.事实上,关于触发 ...

  8. CSS小技巧使用

    1.清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是....// 清除浮动 .clearfix{ zoom: 1; } .c ...

  9. LeetCode - 540. Single Element in a Sorted Array

    Given a sorted array consisting of only integers where every element appears twice except for one el ...

  10. python 路飞模块一考核总结

    1. 分别解释"=","==","+="的含义(口述) =为赋值语句,把一个变量值赋予另一个值 == 为条件判断,判断两个值是否相等 += ...