Highcharts折线图_结合ajax实现局部刷新

1.首先，在https://www.hcharts.cn/下载Highcharts的组件。

2.然后，引用   

 <script src="../code/highcharts.js"></script>

3.html:

1  <div id="container" style="width: 550px; height: 400px;">
2  </div>

4.js

 1  function getselect(Number_cp) {
 2         Number_cp = $(".Number_cp").val();
 3         $.ajax({
 4             url: "../Ajax/DataStatistics.ashx?action=select",
 5             type: "POST",
 6             dataType: "text",
 7             data: {
 8                 Number_cp: Number_cp
 9             },
10             success: function (data) {
11                 var s = data;               
12                 var model = eval(s);
13                 a = "";
14                 for (var i = 0; i < model.length; i++) {
15                     var m = model[i].Quantity;                    
16                     a += m + ",";
17                 }
18                 series_data = "";
19                 series_data = a.substring(0, a.length - 1);                
20                 getQuantity(series_data);
21             }
22         })
23     }
24   function getQuantity(series_data) {
25         var chart = Highcharts.chart('container', {
26             chart: {
27                 type: 'line'
28             },
29             credits: {
30                 enabled: false //不显示LOGO 
31             },
32             title: {
33                 text: '产品数量/每月'
34             },
35             legend: {
36                 align: 'right',
37                 verticalAlign: 'top',
38                 y: 60
39             },
40             xAxis: {
41                 softMin: 1,
42                 title: {
43                     text: '月份'
44                 },
45                 categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
46             },
47             yAxis: {
48                 softMax: 4000,
49                 tickAmount: 9,
50                 title: {
51                     text: '产品数量'
52                 },
53             },
54             plotOptions: {
55                 line: {
56                     dataLabels: {
57                         enabled: true
58                     },
59                     enableMouseTracking: false
60                 }
61             },
62             series: [{
63                 name: '产品数量',
64                 data: eval("[" + series_data + "]")
65             }],
66         });
67     }

5.效果图：

posted @ 2017-05-02 16:07  Bonnie_W  阅读(429)  评论(0)  编辑  收藏  举报