通過前兩章的學(xué)習(xí)，相信大家對highcharts已經(jīng)有了初步的了解。這一章將通過一個例子來模擬Highcharts如何實(shí)現(xiàn)經(jīng)常變化的數(shù)據(jù)顯示。

比如說股票的漲停、實(shí)時籃球比分以及A選手和B選手的支持率。這樣的例子在生活中有很多，就不一一列舉了。 實(shí)現(xiàn)的思路主要還是通過setInterval()方法，隔幾秒刷新數(shù)據(jù),來實(shí)現(xiàn)動態(tài)數(shù)據(jù)的顯示。廢話不多說，直接上代碼。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

$(function() { ?// 設(shè)置全局的時區(qū) ?Highcharts.setOptions({ ?global : { ?useUTC : false ?} ?}); new Highcharts.Chart({ ?chart : { ?renderTo : 'gridTable2', // 放置圖表的DIV容器對應(yīng)頁面的id屬性 ?type : 'spline', // 圖表類型line, spline, area, areaspline ?// 事件 ?events : { ?load : function() { ?var series = this.series[0]; ?// 每隔1秒鐘，圖表更新一次，y數(shù)據(jù)值在0-100之間的隨機(jī)數(shù) ?setInterval(function() { ?var x = (new Date()).getTime(); ?var y = Math.random() * 100; ?series.addPoint([ x, y ], true, true); ?}, 1000); }, ?} ?}, ?title : { ?text : '模擬心電圖' // 圖表標(biāo)題 ?}, ?subtitle : { ?text : 'XXXX' // 副標(biāo)題 ?}, ?// x軸 ?xAxis : { ?// X軸為日期時間類型 ?type : 'datetime', ?// X軸標(biāo)簽間隔 ?tickPixelInterval : 50 ?}, ?// y軸 ?yAxis : { ?title : '', ?max : 100, // Y軸最大值 ?min : 0 ?}, ?// 右下角顯示的LOGO ?credits : { ?text : 'demo', // 設(shè)置LOGO區(qū)文字 ?href : 'http://www.javakfz.com' // 設(shè)置LOGO鏈接地址 ?}, ?// 是否啟用導(dǎo)出功能，默認(rèn)為true ?exporting : { ?enabled : true ?}, ?legend : { ?enabled : false ?}, ?// 當(dāng)鼠標(biāo)懸置數(shù)據(jù)點(diǎn)時的格式化提示 ?tooltip : { ?crosshairs : true, ?formatter : function() { ?return '心率 ' + Highcharts.dateFormat('%H:%M:%S', this.x) ?+ ' ' + Highcharts.numberFormat(this.y, 2); ?} ?}, ?plotOptions : { ?column : { ?dataLabels : { ?enabled : true ?}, ?pointPadding : 0.2, ?borderWidth : 0 ?} ?}, ?// 設(shè)置默認(rèn)數(shù)據(jù) ?series : [ { ?data : (function() { // 設(shè)置默認(rèn)數(shù)據(jù)， ?var data = []; ?var time = (new Date()).getTime(); ?var i; for (i = -19; i <= 0; i++) { ?data.push({ ?x : time + i * 1000, ?y : Math.random() * 100 ?}); ?} ?return data; ?})() ?} ] ?}); });

主要的代碼還是沒有多少變化，最重要的是在events里面加入了一個load方法。再利用setInterval方法每隔一秒更新圖像。效果圖：

圖像每隔一秒就會發(fā)生變化。當(dāng)然這只是一個模擬圖。通過前面幾章，大家可以發(fā)現(xiàn)形成圖像的數(shù)據(jù)都是js里面定好的?？刹豢梢杂脛討B(tài)數(shù)據(jù)作為數(shù)據(jù)源呢？比如說數(shù)據(jù)都是從數(shù)據(jù)庫查詢得到的。答案是肯定的，下一章就著重講解利用Struts2+json+highCharts生成柱狀圖。

原創(chuàng)文章，轉(zhuǎn)載請注明： 轉(zhuǎn)載自java開發(fā)者

本文鏈接地址: highCharts圖表應(yīng)用-模擬心電圖

轉(zhuǎn)載于:https://www.cnblogs.com/hongzai/p/3210499.html

總結(jié)

以上是生活随笔為你收集整理的highCharts图表应用-模拟心电图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。