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. JAVA并发编程学习笔记------协作对象之间发生的死锁

    一. 如果在持有锁时调用某个外部方法,那么将出现活跃性问题.在这个外部方法中可能会获取其他锁(这可能会产生死锁),或者阻塞时间过长,导致其他线程无法及时获得当前被持有的锁.如下代码: public c ...

  2. JAVA并发编程学习笔记------基础构建模块

    一.并发容器:ConcurrentHashMap:1.分段锁机制: 任意数量的读取线程可以并发的访问map,执行读取操作的线程和执行写入操作的线程可以并发的访问Map,并且一定数量的写入线程可以并发的 ...

  3. MySQL基本应用

    1.默认类型转换 CREATE TABLE `indextest` (`id` int(10)  AUTO_INCREMENT,`name` varchar(10) DEFAULT NULL, PRI ...

  4. POJ 3608 Bridge Across Islands [旋转卡壳]

    Bridge Across Islands Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10455   Accepted: ...

  5. Missing artifact net.sf.json-lib:json-lib:jar:2.4错误和Eclipse安装Maven插件错误

    微信公众号:compassblog 欢迎关注.转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.配置Maven项目的pom.xml文件报错 (1).错误描述:Missing artifac ...

  6. LeetCode - 654. Maximum Binary Tree

    Given an integer array with no duplicates. A maximum tree building on this array is defined as follo ...

  7. Install Centrifugo and quick start

    Install Centrifugo and quick start Go is a perfect language - it gives developers an opportunity to ...

  8. 企业级数据库监控利器Lepus

    开篇介绍官方网站:http://www.lepus.cc开源企业级数据库监控系统简洁.直观.强大的开源数据库监控系统,MySQL/Oracle/MongoDB/Redis一站式性能监控,让数据库监控更 ...

  9. Mybatis查询，resultMap="Map" 查询数据有空值，导致整个map为空的问题

    解决方法,不要使用Map接收,使用HashMap或者LinkHashMap,都可以. resultMap="Map" 替换为: resultMap="HashMap&qu ...

  10. JS标签的各种事件的举例

    1.鼠标单击事件( onclick ) <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conten ...