动态更新 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 gráfico; $ (function () {chart = new Highcharts.chart ({Chart: {renderto: 'Container'}, Title: {Text: '?',}, xaxis: {categorías: []}, yaxis: {title: {text: '数据'},}, serie: []});}); función show () {var trs = $ ('tabla tr'); datas var = []; var map = {}; for (var i = 1; i <trs.length; i ++) {var nams = $ ('td: primero', trs [i]). html (); Value var = $ ('td: último', trs [i]). html (); if (typeof map [nams] == 'Undefined') {var Pos = dataS.length; mapa [nams] = pos; datas [pos] = {nombre: nams, data: []}; } datos [map [nams]] ["datos"]. Push (número (valor)); } var series = chart.series; if (serie.length> 0) {series [0] .remove (falso); } var d = datos [0]; Chart.addseries (d); // 设置数据, Danielinbiti Chart.settitle ({Text: D.Name}); // 设置标题 Comocio por Danielinbiti Chart.Redraw (); } </script> <script type = "text/javascript"> $ (function () {new highcharts.chart ({Chart: {renderTo: 'Container2'}, title: {Text: '链球菌毒素 O',}, xaxis: {categorías: []}, calays: {title: {text: '数据'},}, {name: [{n. 'SBASO', Datos: [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 = "Contener2"> </viv> <table align = "Left"> <tr> <TD> CNEM <td> ename </td> <TD> tiempo </td> <td> date </td> </tr> <tr> <tr> <tr> <TD> 2 </td> <td> 6.9 </td> </tr> <tr> <tr> <td> 血小板 </td> <td> HPLT </td> <td> 3 </td> <td> 9.5 </td> </tr> </table> </body> </html>以上这篇动态更新 Highcharts 数据的实现方法就是小编分享给大家的全部内容了 ， 希望能给大家一个参考 也希望大家多多支持武林网。