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. vhost-user 简介

    什么是 vhost-user 在 vhost 的方案中,由于 vhost 实现在内核中,guest 与 vhost 的通信,相较于原生的 virtio 方式性能上有了一定程度的提升,从 guest 到 ...

  2. template.compile()方法

    template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...

  3. javase学习小结一

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

  4. vue项目实现记住密码到cookie功能(附源码)

    实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/ ...

  5. 基本c功能使用不当导致崩溃

    一些基本的c语言操作,使用不当也会有出其不意的问题.比如我最近的一个项目中,用到几句代码: uint8_t * out_pcm = NULL; ....... if (NULL == out_pcm) ...

  6. Java设计模式——模板方法模式

    转载自:https://www.cnblogs.com/zplogo/p/6428593.html 用抽象基类定义算法框架 RefreshBeverage package com.pattern.te ...

  7. 洛谷 [P3254] 圆桌问题

    简单最大流建图 #include <iostream> #include <cstdio> #include <cstring> #include <cmat ...

  8. BZOJ 2780: [Spoj]8093 Sevenk Love Oimaster [广义后缀自动机]

    JZPGYZ - Sevenk Love Oimaster     Oimaster and sevenk love each other.       But recently,sevenk hea ...

  9. 关于WebApi 跨域问题的解决的方式

    最近在做WebApi 进行开发的时候 一直会遇到跨域方面的问题那么如何进行跨域问题其实非常的简单. 1.一直在使用WebApi的时候总是遇到跨域的问题 那么 什么是跨域?跨域,指的是浏览器不能执行其他 ...

  10. 【模板小程序】求小于等于N范围内的质数

    //筛法求N以内的素数(普通法+优化),N>=2 #include <iostream> #include <cmath> #include <vector> ...