动态更新 Highcharts 数据的实现方法
<! docType html> <html> <kopf> <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 -Diagramm; $ (function () {chart = new HighCharts.chart ({chart: {renderto: 'container'}, title: {text: '?',}, xaxis: {kategorien: []}, yaxis: {title: {text: '数据'},},}, sery: []}); {}); Funktion show () {var trs = $ ('table tr'); var datas = []; var map = {}; für (var i = 1; i <trsength; i ++) {var nams = $ ('td: First', trs [i]). html (); var value = $ ('td: last', trs [i]). html (); if (typeof map [nams] == 'undefined') {var pos = datas.length; Karte [nams] = pos; Datas [pos] = {Name: NAMS, Daten: []}; } datas [map [nams]] ["data"]. push (number (value)); } var Series = chart.series; if (Series.Length> 0) {Serie [0] .Remove (false); } var d = datas [0]; Chart.AddSeries (d); // 设置数据, Danielinbiti chart.settitle ({text: d.name}); // 设置标题 Lob von 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', Daten: [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"></div> <!-- 第二个有数据的图 --> <div id="container2"></div> <table 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>> </html> </td> </body> </html>以上这篇动态更新 Highcharts 数据的实现方法就是小编分享给大家的全部内容了 ， 希望能给大家一个参考 ， 也希望大家多多支持武林网。 也希望大家多多支持武林网。