株価データをチャートでライブ表示する作業をしています。私はそれにHighchartsを使用しています。しかし、私はそれの適切な出力を得ていません。画像を見る
問題:
マージン:
ご覧のとおり、y軸のマージンは非常に高いため、私のohlcデータは非常に薄く表示されています。一部のポイントにカーソルを合わせても強調表示されない:
一部のポイントにカーソルを合わせようとすると、そのポイントのデータが表示されません。前のポイントのデータに固執します。下部の青い領域の陰影:
ご覧のとおり、下部の青い領域は特定の地域のデータに応じて変化していません。スクロールの問題:
スクロールバーを移動したり、サイズを大きくしようとすると、右端で動かなくなります。(スクロールしようとすると右側に引っかかってしまうので動かせません。)ズームの問題:
ズームオプションを使用してズームインしようとすると、データをズームできません。すべてのズームで、「すべて」オプションと同じままです
このスクリプトにいくつかの変更を加えました:(2つのペイン、ローソク足、ボリューム)データを受信します。
$ .getJSONを使用してPHPファイルからすべてのライブデータを取得し、すべてのことを行っています。
それは私のライブ株式市場データであるため、私はそれのフィドルを作成することはできません。
コードは次のとおりです。
$(function() {
$.getJSON('get_data.php?type=ohlc', function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length;
alert(data);
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i]['SQLDT'], // the date
parseFloat(data[i]['OPN']), // open
parseFloat(data[i]['HGH']), // high
parseFloat(data[i]['LWE']), // low
parseFloat(data[i]['CLS']) // close
]);
volume.push([
data[i]['SQLDT'], // the date
parseFloat(data[i]['VOL']) // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
xAxis:[ {
min: 10
},{
min: 10
}],
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2,
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
scrollbar: {
enabled: true
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});