zoukankan      html  css  js  c++  java
  • HighCharts之2D面积图

    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=" 1200px; height: 550px; margin: 0 auto"></div>
    </body>
    </html>


    2、运行结果


  • 相关阅读:
    Java提高班(五)深入理解BIO、NIO、AIO
    Java提高班(四)面试必备—你不知道的数据集合
    Spring Boot 系列总目录
    Java提高班(三)并发中的线程同步与锁
    Java提高班(二)深入理解线程池ThreadPool
    Spring Boot(十四)RabbitMQ延迟队列
    Spring Boot(十三)RabbitMQ安装与集成
    Spring Boot(十二)单元测试JUnit
    Spring Boot(十一)Redis集成从Docker安装到分布式Session共享
    VS2013中Python学习笔记[环境搭建]
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315279.html
Copyright © 2011-2022 走看看