动态更新 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/javroScript" src = "http://cdn.hcharts.cn/highcharts/highcharts.js"> </script> <script type = "text/javascript"> var gráfico; $ (function () {Chart = new HighCharts.Chart ({Chart: {renderto: 'contêiner'}, título: {text: '?',}, xaxis: {categorias: []}, yaxis: {title: {text: '数据'},}, série: []});};);); function show () {var trs = $ ('tabela tr'); varas var = []; var map = {}; for (var i = 1; i <trs.Length; i ++) {var nams = $ ('td: primeiro', trs [i]). html (); var value = $ ('td: last', trs [i]). html (); if (typeof map [nams] == 'indefinido') {var pos = datas.length; mapa [nams] = pos; dados [pos] = {nome: nams, dados: []}; } dados [map [nams]] ["dados"]. push (número (valor)); } var série = Chart.Series; if (série.Length> 0) {série [0] .Remove (false); } var d = dados [0]; Chart.AddSeries (d); // 设置数据, Danielinbiti Chart.Settitle ({text: d.Name}); // 设置标题 Encomenda por Danielinbiti Chart.redraw (); } </script> <script type = "text/javascript"> $ (function () {new HighCharts.Chart ({CHAT: {renderto: 'container2'}, título: {text: '链球菌毒素 o',}, xaxis: {categorias: []},} [{{{: {{{{{ 'Sbaso', dados: [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> </ad Head> <body> <input type = 'button' onclick = 'show ()' value = '显示表格数据'/> <h1> 曲线图 </h1> <!-第一个空图-> <div id = "contêiner"> </div> <!-第二个有数据的图-> <div Id = "contêiner2"> </Div "> </align <! <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> </ tabela> </body> </html>以上这篇动态更新 Highcharts 数据的实现方法就是小编分享给大家的全部内容了 ， 希望能给大家一个参考 ， 也希望大家多多支持武林网。