HighCharts之2D面积图 





1、HighCharts之2D面积图源码

<!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(){
    	 $('#areaChart').highcharts({
    		 chart: {
                 type: 'area'
             },
             title: {
                 text: '年收入'
             },
             subtitle: {
                 text: ''
             },
             xAxis: {
                 labels: {
                     formatter: function() {
                         return this.value;
                     }
                 }
             },
             yAxis: {
                 title: {
                     text: '月收入'
                 },
                 labels: {
                     formatter: function() {
                         return this.value / 2000 +'k';
                     }
                 }
             },
             tooltip: {
                 pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>{point.x}'
             },
             plotOptions: {
                 area: {
                     pointStart: 1840,
                     marker: {
                         enabled: true,
                         symbol: 'circle',
                         radius: 1,
                         states: {
                             hover: {
                                 enabled: true
                             }
                         }
                     }
                 }
             },
             series: [{
                 name: '张三',
                 data: [784, 645, 5623, 8945, 42121, 6895 , 1451, 3212, 1100, 2359, 369, 640,
                     1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                     27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                     26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                     24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                     22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                     10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
             }, {
                 name: '李四',
                 data: [9865, 7845, 1245, 9565, 4512, 5644, 1245 , 6532 , 7845 ,4512,
                 4512, 2589, 5000, 1920, 1520, 2600, 4026, 660, 869, 1060, 1605, 2471, 3322,
                 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
                 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
                 33952, 35804, 37431, 39197, 4400, 43000, 41000, 39000, 37000,
                 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                 21000, 20000, 19000, 18000, 18000, 17000, 16000]
             }]
         });
     });
</script>
</head>
<body>
   <div id="areaChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

HighCharts之2D面积图的更多相关文章

  1. HighCharts之2D折线图

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

  2. HighCharts之2D金字塔图

    HighCharts之2D金字塔图 1.实例源码 Pyramid.html: <!DOCTYPE html> <html> <head> <meta char ...

  3. HighCharts之2D半圆环图

    HighCharts之2D半圆环图 1.实例源码 HalfDonut.html: <!DOCTYPE html> <html> <head> <meta ch ...

  4. HighCharts之2D圆环图

    HighCharts之2D圆环图 1.实例源码 Donut.html: <!DOCTYPE html> <html> <head> <meta charset ...

  5. Flex中的FusionCharts 2D面积图

    Flex中的FusionCharts 2D面积图 1.源码 <?xml version="1.0" encoding="utf-8"?> <s ...

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

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

  7. HighCharts之2D堆面积图

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

  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. javase学习小结一

    输出格式: int num=12345; System.out.printf("%7d",number);输出结果为:空格空格12345 System.out.println(&q ...

  2. 不需要客户端插件PHP也能实现单点登录

    分析CAS原理,构建PHP单点登录 单点登录(Single Sign On , 简称 SSO )是目前比较流行的服务于企业业务整合的解决方案之一, SSO 使得在多个应用系统中,用户 只需要登录一次就 ...

  3. root cause org.apache.ibatis.ognl.OgnlException: source is null for getProperty(null, "XXX")

    在执行一个查询语句的时候,mybatis报错:root cause org.apache.ibatis.ognl.OgnlException: source is null for getProper ...

  4. python学习交流 - 内置函数使用方法和应用举例

    内置函数 python提供了68个内置函数,在使用过程中用户不再需要定义函数来实现内置函数支持的功能.更重要的是内置函数的算法是经过python作者优化的,并且部分是使用c语言实现,通常来说使用内置函 ...

  5. xBIM IFC 墙壁案例

    目录 xBIM 应用与学习 (一) xBIM 应用与学习 (二) xBIM 基本的模型操作 xBIM 日志操作 XBIM 3D 墙壁案例 xBIM 格式之间转换 xBIM 使用Linq 来优化查询 x ...

  6. CentOS7修改SSH远程连接端口

      CentOS7修改SSH远程连接端口              

  7. Vue.js搭建路由报错 router.map is not a function，Cannot read property ‘component’ of undefined

    错误: 解决办法: 2.0已经没有map了,使用npm install vue-router@0.7.13 命令兼容1.0版本vue 但是安装完之后会出现一个错误: Cannot read prope ...

  8. OI黑科技：读入优化

    利用getchar()函数加速读入. Q:读入优化是什么? A :更加快速地读入一些较大的数字. Q:scanf不是已经够快了吗? A:Naive,scanf还是不!够!快! Q:那怎么办呢? A:我 ...

  9. 【转】Android UI 五种布局

    在一个Android应用中,Layout是开发中的一个很重要环节,Layout是组成UI不可缺少的一部分. ## Android UI 核心类 在Android应用构建UI的方法有以下几种: 单纯使用 ...

  10. Redis进阶实践之十 Redis哨兵集群模式

    一.引言             上一篇文章我们详细的讲解了Redis的主从集群模式,其实这个集群模式配置很简单,只需要在Slave的节点上进行配置,Master主节点的配置不需要做任何更改,但是有一 ...