动态更新highcharts数据的实现方法

334 阅读 0 评论 221 点赞

我是靠谱客的博主冷傲凉面，这篇文章主要介绍动态更新highcharts数据的实现方法，现在分享给大家，希望可以做个参考。

动态更新highcharts数据的实现方法

复制代码

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript">
    	  var chart ;
      $(function (){
        chart = new Highcharts.Chart({
        	chart: { 
            renderTo: 'container'
          },
          title: {
            text: '?',
          },
          xAxis: {
            categories: []
          },
          yAxis: {
            title: {
              text: '数据'
            },
          },
          series: []
        });
      });
      function show(){
      	var trs = $('table tr');
      	var datas=[];
      	var map={};
      	for(var i=1;i<trs.length;i++){
      		 var nams = $('td:first',trs[i]).html();
      		 var value = $('td:last',trs[i]).html();
      		 if(typeof map[nams]=='undefined'){
      		 	 var pos = datas.length;
      		 	 map[nams] = pos;
      		 	 datas[pos]={name:nams,data:[]};
      		 }
      		 datas[map[nams]]["data"].push(Number(value));
      	}
      	var series=chart.series; 
      	if(series.length > 0){
      	  series[0].remove(false); 
       }
       var d = datas[0];
       chart.addSeries(d);//设置数据,danielinbiti
       chart.setTitle({text:d.name});//设置标题 commend by danielinbiti
       chart.redraw();
      }
    </script>
    <script type="text/javascript">
      $(function () {
        new Highcharts.Chart({
        	 chart: { 
            renderTo: 'container2'
          },
          title: {
            text: '链球菌毒素O',
          },
          xAxis: {
            categories: []
          },
          yAxis: {

title: {
              text: '数据'
            },
          },
          series: [{
            name: 'SBASO',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }]
        });
      });
    </script>
  </head>
  <body>
  	 <input type='button' onclick='show()' value='显示表格数据'/>
    <h1>曲线图</h1>
    
    <div id="container" style="width:300px;height:300px;float:left;"></div>
    
    <div id="container2" style="width:300px;height:300px;float:left;"></div>
    <table border="1" align="left">
      <tr>
        <td>CName</td>
        <td>EName</td>
        <td>Time</td>
        <td>Date</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>1</td>
        <td>7.0</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>2</td>
        <td>6.9</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>3</td>
        <td>9.5</td>        
      </tr>
    </table>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript">
    	  var chart ;
      $(function (){
        chart = new Highcharts.Chart({
        	chart: { 
            renderTo: 'container'
          },
          title: {
            text: '?',
          },
          xAxis: {
            categories: []
          },
          yAxis: {
            title: {
              text: '数据'
            },
          },
          series: []
        });
      });
      function show(){
      	var trs = $('table tr');
      	var datas=[];
      	var map={};
      	for(var i=1;i<trs.length;i++){
      		 var nams = $('td:first',trs[i]).html();
      		 var value = $('td:last',trs[i]).html();
      		 if(typeof map[nams]=='undefined'){
      		 	 var pos = datas.length;
      		 	 map[nams] = pos;
      		 	 datas[pos]={name:nams,data:[]};
      		 }
      		 datas[map[nams]]["data"].push(Number(value));
      	}
      	var series=chart.series; 
      	if(series.length > 0){
      	  series[0].remove(false); 
       }
       var d = datas[0];
       chart.addSeries(d);//设置数据,danielinbiti
       chart.setTitle({text:d.name});//设置标题 commend by danielinbiti
       chart.redraw();
      }
    </script>
    <script type="text/javascript">
      $(function () {
        new Highcharts.Chart({
        	 chart: { 
            renderTo: 'container2'
          },
          title: {
            text: '链球菌毒素O',
          },
          xAxis: {
            categories: []
          },
          yAxis: {

            title: {
              text: '数据'
            },
          },
          series: [{
            name: 'SBASO',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }]
        });
      });
    </script>
  </head>
  <body>
  	 <input type='button' onclick='show()' value='显示表格数据'/>
    <h1>曲线图</h1>
    <!-- 第一个空图 -->
    <div id="container" style="width:300px;height:300px;float:left;"></div>
    <!-- 第二个有数据的图 -->
    <div id="container2" style="width:300px;height:300px;float:left;"></div>
    <table border="1" align="left">
      <tr>
        <td>CName</td>
        <td>EName</td>
        <td>Time</td>
        <td>Date</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>1</td>
        <td>7.0</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>2</td>
        <td>6.9</td>        
      </tr>
      <tr>
        <td>血小板</td>
        <td>HPLT</td>
        <td>3</td>
        <td>9.5</td>        
      </tr>
    </table>
  </body>
</html>