參考鏈接：https://www.highcharts.com.cn/docs/ajax
參考鏈接中的示例代碼是使用php寫的，這里改用python寫。
需要注意的地方：
1.接口返回的數據格式，這個需要根據Ajax請求代碼而定，是一個數值，還是一個數組。
2.js中Ajax的寫法，請求路徑，請求返回的數據格式等。
前一篇文章是服務端直接給html頁面傳遞數據，這篇文章采用Ajax的方式傳遞數據，推薦使用這種。
大致思路時打開網頁，先出現圖表框架，然后使用Ajax的方式往服務端請求數據，然后在圖表中渲染出來，進而實現動態渲染圖表數據
代碼結構如下，采用最簡單的Flask框架形式：
1.ajax_demo.py
import random import time from flask import Flask, render_template,jsonify app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/get/') def get(): x = int(time.time()) * 1000 y = random.randint(0, 100) b= [x,y] return jsonify(b) if __name__ == '__main__': app.run(debug=True)
2..index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一個 Highcharts 圖表</title> <!-- 引入 jquery.js --> <script src="static/jquery-3.3.1.min.js"></script> <!-- 引入 highcharts.js --> <script src="static/highcharts-7.0.3.js"></script> </head> <body> <!-- 圖表容器 DOM --> <div id="container" style="min-width:500px;height:500px"></div> <script src="static/a.js"></script> </body> </html>
3.a.js
1 var chart = null; // 定義全局變量 2 $(document).ready(function () { 3 chart = Highcharts.chart('container', { 4 chart: { 5 type: 'spline', 6 events: { 7 load: requestData // 圖表加載完畢后執行的回調函數 8 } 9 }, 10 title: { 11 text: 'Live random data' 12 }, 13 xAxis: { 14 type: 'datetime', 15 tickPixelInterval: 150, 16 maxZoom: 20 * 1000 17 }, 18 yAxis: { 19 minPadding: 0.2, 20 maxPadding: 0.2, 21 title: { 22 text: 'Value', 23 margin: 80 24 } 25 }, 26 series: [{ 27 name: '隨機數據', 28 data: [], 29 }] 30 }); 31 32 33 }); 34 35 /** 36 * Ajax 請求數據接口，並通過 Highcharts 提供的函數進行動態更新 37 * 接口調用完畢后間隔 1 s 繼續調用本函數，以達到實時請求數據，實時更新的效果 38 */ 39 function requestData() { 40 $.get({ 41 url: '/get/', 42 'success': function (point) {
// console.log(point); // point為請求接口返回的數據 Array [ 1551065494000, 82 ] 43 var series = chart.series[0], 44 shift = series.data.length > 20; // 當數據點數量超過 20 個，則指定刪除第一個點 45 46 // 新增點操作 47 //具體的參數詳見：https://api.hcharts.cn/highcharts#Series.addPoint 48 chart.series[0].addPoint(point, true, shift); 49 50 // 一秒后繼續調用本函數 51 setTimeout(requestData, 1000); 52 }, 53 cache: false 54 }); 55 }
效果如圖，每秒刷新一下數據生成圖表：
代碼分析：
1. a.js
chart.series[0].addPoint()
鏈接：https://api.hcharts.cn/highcharts#Series.addPoint
addPoint(Object options, [Boolean redraw], [Boolean shift], [Mixed animation])
在圖表渲染完畢后對數據列進行新增點操作。新增的點可以是最后的點，也可以給定 X 值來放置在對應的位置（最開始，中間位置，取決於 x值）
參數
- options: Number|Array|Object
數據點的配置，可以是單個數值，表示數據點的 y值；也可以是一個數組，包含 x 和 y 值；還可以是一個對象，包含詳細的數據點配置，詳細的配置見 series.data。 - redraw: Boolean
默認是true，是否在操作完畢后對圖標進行重繪操作。 當需要增加多個點時，強烈建議將redraw設置為 false，並在所有操作結束后手動調用chart.redraw()來對圖表進行重繪操作。 - shift: Boolean
默認是false，當此屬性為 true 時，新增點的同時會刪除數據列中的第一個點（即保持數據列中數據點的總數不變）。在檢測圖表中這個屬性非常有用。 - animation: Mixed
默認是 true，即新增點時包含默認動畫效果的，這個參數也可以傳入包含duration及easing的對象形式，詳細參考動畫相關配置。
因為需要同時返回x 和 y 值，所有從接口返回的數據需要是一個數組形式，也即是用中括號形式
從返回接口獲取到的數據會自動往數據點填充數據數據，也就是從/get/獲取到的數據會自動往圖標框架中的data：[]中填充，圖表這些js代碼不需要修改。
2.ajax_demo.py
數據接口返回的數據是 JSON 對象的形式，所以/get/路徑需要返回一個json數組形式，構造的變量b為列表形式，再使用jsontify()函數返回即可。
3.index.html
沒啥可說的，無非是一些js引用之類的，注意引用的先后順序