快捷導(dǎo)航

jQuery插件HighCharts實現(xiàn)的2D面積圖效果示例【附demo源碼下載】

更新時間：2017年03月15日 10:53:24 作者：翱翔天地

這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)的2D面積圖效果,結(jié)合完整實例形式分析了jQuery插件HighCharts繪制2D面積圖的相關(guān)步驟與屬性設(shè)置技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了jQuery插件HighCharts實現(xiàn)的2D面積圖效果。分享給大家供大家參考，具體如下：

1、實例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D面積圖</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
   $(function(){
     $('#areaChart').highcharts({
       chart: {
         type: 'area'
       },
       title: {
         text: '(jb51.net)統(tǒng)計年收入'
       },
       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、運行效果圖如下：