动态更新highcharts数据的实现方法
动态更新highcharts数据的实现方法
<!doctypehtml>
<html>
<head>
<scripttype="text/javascript"src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<scripttype="text/javascript"src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<scripttype="text/javascript">
varchart;
$(function(){
chart=newHighcharts.Chart({
chart:{
renderTo:'container'
},
title:{
text:'?',
},
xAxis:{
categories:[]
},
yAxis:{
title:{
text:'数据'
},
},
series:[]
});
});
functionshow(){
vartrs=$('tabletr');
vardatas=[];
varmap={};
for(vari=1;i<trs.length;i++){
varnams=$('td:first',trs[i]).html();
varvalue=$('td:last',trs[i]).html();
if(typeofmap[nams]=='undefined'){
varpos=datas.length;
map[nams]=pos;
datas[pos]={name:nams,data:[]};
}
datas[map[nams]]["data"].push(Number(value));
}
varseries=chart.series;
if(series.length>0){
series[0].remove(false);
}
vard=datas[0];
chart.addSeries(d);//设置数据,danielinbiti
chart.setTitle({text:d.name});//设置标题commendbydanielinbiti
chart.redraw();
}
</script>
<scripttype="text/javascript">
$(function(){
newHighcharts.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>
<inputtype='button'onclick='show()'value='显示表格数据'/>
<h1>曲线图</h1>
<!--第一个空图-->
<divid="container"style="width:300px;height:300px;float:left;"></div>
<!--第二个有数据的图-->
<divid="container2"style="width:300px;height:300px;float:left;"></div>
<tableborder="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>
以上这篇动态更新highcharts数据的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。