Highstock上的多窗格

Question

我正在嘗試使用高圖表創建兩窗格股票圖表，例如此處的http://www.highcharts.com/stock/demo/candlestick-and-volume/grid-light

我將JSON文件存儲在這里https://api.jsonbin.io/b/5c9499db08b9a73c3abeec4a 。

當我運行項目時，我不知道為什么這些數據無法正常工作，並且十進制值變大，以及如何將時間序列與我的7+ GMT系列進行同步。

這是我的項目：

 $.getJSON('https://api.jsonbin.io/b/5c9499db08b9a73c3abeec4a', function (data) { var X = [], Y = [], temperature = [], dataLength = data.length, // set the allowed units for data grouping groupingUnits = [[ 'week', // unit name [1] // allowed multiples ], [ 'month', [1, 2, 3, 4, 6] ]], i = 0; for (i; i < dataLength; i += 1) { X.push([ data[i][0], // the date data[i][1] // the X ]); Y.push([ data[i][0], // the date data[i][2] // the Y ]); temperature.push([ data[i][0], // the date data[i][3] // the temp ]); } // create the chart Highcharts.stockChart('container', { rangeSelector: { selected: 1 }, title: { text: 'AAPL Historical' }, yAxis: [{ labels: { align: 'right', x: -3 }, title: { text: 'X' }, height: '60%', lineWidth: 2, resize: { enabled: true } }, { labels: { align: 'right', x: -3 }, title: { text: 'temp' }, top: '65%', height: '35%', offset: 0, lineWidth: 2 }], tooltip: { split: true }, series: [ { type: 'line', name: 'X', data: X, dataGrouping: { units: groupingUnits } }, { type: 'line', name: 'Y', data: Y, dataGrouping: { units: groupingUnits } }, { type: 'line', name: 'temp', data: temperature, yAxis: 1, dataGrouping: { units: groupingUnits } }] }); }); 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> <div id="container" style="height: 400px; min-width: 310px"></div> 

Answer 1

您相對於數據定義了錯誤的dataGrouping.units數組。 檢查以下示例。

碼：

 $.getJSON('https://api.jsonbin.io/b/5c9499db08b9a73c3abeec4a', function(data) { var X = [], Y = [], temperature = [], dataLength = data.length, groupingUnits = [ [ 'millisecond', // unit name [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples ], [ 'second', [1, 2, 5, 10, 15, 30] ], [ 'minute', [1, 2, 5, 10, 15, 30] ], [ 'hour', [1, 2, 3, 4, 6, 8, 12] ], [ 'day', [1] ], [ 'week', [1] ], [ 'month', [1, 2, 3, 4, 6] ], [ 'year', null ] ], i = 0; for (i; i < dataLength; i += 1) { X.push([ data[i][0], // the date data[i][1] // the X ]); Y.push([ data[i][0], // the date data[i][2] // the Y ]); temperature.push([ data[i][0], // the date data[i][3] // the temp ]); } // create the chart Highcharts.stockChart('container', { yAxis: [{ labels: { align: 'right', x: -3 }, title: { text: 'X' }, height: '60%', lineWidth: 2, resize: { enabled: true } }, { labels: { align: 'right', x: -3 }, title: { text: 'temp' }, top: '65%', height: '35%', offset: 0, lineWidth: 2 }], tooltip: { split: true }, plotOptions: { series: { dataGrouping: { units: groupingUnits } } }, series: [{ name: 'X', data: X }, { name: 'Y', data: Y }, { name: 'temp', data: temperature, yAxis: 1 } ] }); }); 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> <div id="container" style="height: 400px; min-width: 310px"></div> 

演示：

• http://jsfiddle.net/BlackLabel/b2qgrLs1/1/

API參考：

• https://api.highcharts.com/highstock/series.line.dataGrouping.units