動(dòng)態(tài)更新highcharts數(shù)據(jù)的實(shí)現(xiàn)方法

更新時(shí)間：2016年05月28日 14:43:26 投稿：jingxian

下面小編就為大家?guī)硪黄獎(jiǎng)討B(tài)更新highcharts數(shù)據(jù)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

動(dòng)態(tài)更新highcharts數(shù)據(jù)的實(shí)現(xiàn)方法

<!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: '數(shù)據(jù)'
            },
          },
          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);//設(shè)置數(shù)據(jù),danielinbiti
       chart.setTitle({text:d.name});//設(shè)置標(biāo)題 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: '數(shù)據(jù)'
            },
          },
          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='顯示表格數(shù)據(jù)'/>
    <h1>曲線圖</h1>
    <!-- 第一個(gè)空?qǐng)D -->
    <div id="container" style="width:300px;height:300px;float:left;"></div>
    <!-- 第二個(gè)有數(shù)據(jù)的圖 -->
    <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>

以上這篇?jiǎng)討B(tài)更新highcharts數(shù)據(jù)的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: