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. SQL Server比较2table字段的差异

    由于项目前后用了2个数据库,需要统计数据库结构的变化,需要统计每个表的变化,由于人工核对挺浪费时间,就写了一点代码: 1.统计表的字段数量(查询表有多少列): select count(name)   ...

  2. jQuery中的DOM操作------复制及包裹节点

    1.复制节点: 如果单击<li>元素后需要再复制一个<li>元素,可以用clone()方法来完成: $(this).clone().appendTo("ul" ...

  3. yum安装centos系统依赖库

    安装centos系统依赖库,安装软件过程中,经常需要的一些库,可以在编译安装软件前执行如下命令: 首先更新系统(这步可以不执行) yum -y update 这种更新是全部更新,但是有时一些软件不想更 ...

  4. BZOJ 2083: [Poi2010]Intelligence test [vector+二分]

    2083: [Poi2010]Intelligence test Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 469  Solved: 227[Su ...

  5. Azure ARM (21) Azure订阅的两种管理模式

    <Windows Azure Platform 系列文章目录> 熟悉Azure平台的读者都知道,Microsoft Azure服务管理,分为三个层次: 1.企业服务合同 (Enterpri ...

  6. python语言基础汇总

    注释 代码中添加注释是一个良好的编程习惯,python语言的注释才用井号'#'作为注释开头的,可以是任意内容,解释器会忽略掉这部分内容.其他每一行都是语句,当语句以冒号':'结尾时,缩进的语句视为代码 ...

  7. react小结

    react基础小结 1. 例子 import React from 'react' import { render } from 'react-dom' // 定义组件 class Hello ext ...

  8. ASCII Art (English)

    Conmajia, 2012 Updated on Feb. 18, 2018 What is ASCII art? It's graphic symbols formed by ASCII char ...

  9. angularjs 指令详解

    一.指令定义 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: <div my-direct ...

  10. Oracle数据库中SCOTT用户下的默认表

    ①EMP(雇员表): ②DEPT(部门表): ③BONUS(奖金表): ④SALGRADE(工资等级表):