# 動態實時數據 * 載入數據 ~~~ <script type="text/javascript" src="{relative_root}jquery/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="{relative_root}highcharts/highcharts.js"></script> ~~~ * 承載容器 ~~~ <div id="container" style="height:600px;"></div> ~~~ * 調起js ~~~ var para = {}; para.global = {useUTC: false}; Highcharts.setOptions(para); var json = {}; json.chart = { type: 'spline', events: { load: function () { var series = this.series[0], chart = this; setInterval(function () { var x = (new Date()).getTime(), // 當前時間 y = 1; // 隨機值 series.addPoint([x, y], true, true); }, 3000); } } }; json.title = {text: '動態模擬實時數據'}; json.xAxis = {type: 'datetime', tickPixelInterval: 150}; json.yAxis = {title: {text: null}}; json.tooltip = { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2); } }; json.legend = {enabled: false}; json.series = [{ name: '隨機數據', data: (function () { // 生成隨機值 var data = [],time = (new Date()).getTime(),i; for (i = 0; i <= 10; i ++) { data.push({ x: time + i * 1000, y: i }); } return data; }()) }]; $('#container').highcharts(json); ~~~