通過前兩章的學習，相信大家對highcharts已經有了初步的了解。這一章將通過一個例子來模擬Highcharts如何實現經常變化的數據顯示。

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

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() { ?// 設置全局的時區 ?Highcharts.setOptions({ ?global : { ?useUTC : false ?} ?}); new Highcharts.Chart({ ?chart : { ?renderTo : 'gridTable2', // 放置圖表的DIV容器對應頁面的id屬性 ?type : 'spline', // 圖表類型line, spline, area, areaspline ?// 事件 ?events : { ?load : function() { ?var series = this.series[0]; ?// 每隔1秒鐘，圖表更新一次，y數據值在0-100之間的隨機數 ?setInterval(function() { ?var x = (new Date()).getTime(); ?var y = Math.random() * 100; ?series.addPoint([ x, y ], true, true); ?}, 1000); }, ?} ?}, ?title : { ?text : '模擬心電圖' // 圖表標題 ?}, ?subtitle : { ?text : 'XXXX' // 副標題 ?}, ?// x軸 ?xAxis : { ?// X軸為日期時間類型 ?type : 'datetime', ?// X軸標簽間隔 ?tickPixelInterval : 50 ?}, ?// y軸 ?yAxis : { ?title : '', ?max : 100, // Y軸最大值 ?min : 0 ?}, ?// 右下角顯示的LOGO ?credits : { ?text : 'demo', // 設置LOGO區文字 ?href : 'http://www.javakfz.com' // 設置LOGO鏈接地址 ?}, ?// 是否啟用導出功能，默認為true ?exporting : { ?enabled : true ?}, ?legend : { ?enabled : false ?}, ?// 當鼠標懸置數據點時的格式化提示 ?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 ?} ?}, ?// 設置默認數據 ?series : [ { ?data : (function() { // 設置默認數據， ?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方法每隔一秒更新圖像。效果圖：

圖像每隔一秒就會發生變化。當然這只是一個模擬圖。通過前面幾章，大家可以發現形成圖像的數據都是js里面定好的。可不可以用動態數據作為數據源呢？比如說數據都是從數據庫查詢得到的。答案是肯定的，下一章就著重講解利用Struts2+json+highCharts生成柱狀圖。

原創文章，轉載請注明： 轉載自java開發者

本文鏈接地址: highCharts圖表應用-模擬心電圖

轉載于:https://www.cnblogs.com/hongzai/p/3210499.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。