动态更新 HighCharts 数据的实现方法
<! doctype html> <html> <éadf> <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 graphique; $ (function () {chart = new HighChart.Chart ({Chart: {renderTo: 'Container'}, Title: {Text: '?',}, xaxis: {catégories: []}, yaxis: {title: {text: '数据'},}, série: []});}); fonction show () {var trs = $ ('table tr'); var datas = []; var map = {}; pour (var i = 1; i <tr.length; i ++) {var nams = $ ('td: premier', trs [i]). html (); var valeur = $ ('td: dernier', trs [i]). html (); if (typeof map [nams] == 'undefined') {var pos = dataS.length; map [nams] = pos; datas [pos] = {nom: nams, données: []}; } datas [map [nams]] ["data"]. push (nombre (valeur)); } var série = chart.series; if (series.length> 0) {série [0] .Remove (false); } var d = datas [0]; chart.addseries (d); // 设置数据, danielinbiti chart.settitle ({text: d.name}); // 设置标题 recommandation par danielinbiti chart.redraw (); } </ script> <script type = "text / javascript"> $ (function () {new HighCharts.Chart ({Chart: {Renderto: 'Container2'}, Title: {Text: '链球菌毒素 O',}, xaxis: {catégories: []}, Yaxis: {Title: {text: '数据' 数据 '},},. 'Sbaso', données: [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> <entrée type = 'bouton' onclick = 'show ()' value = '显示表格数据' /> <h1> 曲线图 </h1> <! - 第一个空图 -> <div id = "Container"> </ div> <! - 第二个有数据的图 -> <div id = "Container2"> </v> <Table <Td> ename </td> <td> Time </td> <td> Date </td> </tr> <tr> <td> 血小板 </td> <td> hplt </td> <td> 1 </td> <td> 7.0 </td> </p> <td> 血小板 </td> <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 数据的实现方法就是小编分享给大家的全部内容了 ， 希望能给大家一个参考 ， 也希望大家多多支持武林网。