Highstock 是一個非常強大的可視化數據框架,可以通過獲取JSON文件來展示數據。下面是如何使用 Highstock 獲取 JSON 文件的示例。
// 創建一個變量來存儲 Highstock 圖表 var chart = Highcharts.stockChart('container', { // 配置文件為 JSON 格式,通過使用 Ajax 異步獲取 JSON 文件 // 設置 data 的值為 JSON 文件的 URL 地址 // 例如:http://www.example.com/data.json data: { // 通過使用 jQuery 的 $.getJSON 方法異步獲取 JSON 文件 // 設置 callback 函數來對返回的數據進行處理 // 在 callback 函數中,將結果存放到圖表的 series 中 $.getJSON('http://www.example.com/data.json', function (data) { // 處理返回的數據 var ohlcData = [], volumeData = []; // 將數據存儲到數組中 for (i = 0; i< data.length; i++) { ohlcData.push([ data[i][0], data[i][1], data[i][2], data[i][3], data[i][4] ]); volumeData.push([ data[i][0], data[i][5] ]); } // 將數據添加到圖表的 series 中 chart.addSeries({ type: 'candlestick', name: 'OHLC', data: ohlcData }); chart.addSeries({ type: 'column', name: 'Volume', data: volumeData }); }); } });
以上是使用 Highstock 獲取 JSON 文件的簡單示例。您可以根據自己的需求來修改代碼,并使用自己的 JSON 文件來進行測試。
下一篇html 在線源代碼