[英]How can i use dynamic data on a Highcharts chart?
我正在從我頁面上的 websocket 連接接收數據,我想在 Highcharts 深度圖表上繪制該數據。
深度圖: https://www.highcharts.com/docs/stock/depth-chart
這是我的代碼:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script language="javascript">
mySocket.onmessage = function(event) {
var data = JSON.parse(event.data);
rawAsks = data['asks']
rawBids = data['bids']
const asks = rawasks.map(x => x.map(y => parseFloat(y))) //DATA TO USE ON THE CHART
const bids = rawbids.map(x => x.map(y => parseFloat(y))) //DATA TO USE ON THE CHART
};
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'xy'
},
title: {
text: 'ETH-BTC Market Depth'
},
xAxis: {
minPadding: 0,
maxPadding: 0,
},
yAxis: [{
lineWidth: 1,
gridLineWidth: 1,
title: null,
tickWidth: 1,
tickLength: 5,
tickPosition: 'inside',
labels: {
align: 'left',
x: 8
}
}, {
opposite: true,
linkedTo: 0,
lineWidth: 1,
gridLineWidth: 0,
title: null,
tickWidth: 1,
tickLength: 5,
tickPosition: 'inside',
labels: {
align: 'right',
x: -8
}
}],
legend: {
enabled: false
},
plotOptions: {
area: {
fillOpacity: 0.2,
lineWidth: 1,
step: 'center'
}
},
tooltip: {
headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>',
valueDecimals: 2
},
series: [{
name: 'Bids',
data: Bids, //HERE GOES THE DATA
color: '#03a7a8'
}, {
name: 'Asks',
data: Asks, //HERE GOES THE DATA
color: '#fc5857'
}]
});
</script>
以下是我的圖表的問題:1) plot 的數據是asks
和bids
。 問題是這兩個變量每秒從 websocket 連接更新一次,所以它們不是 static 值。 2) 如何將賣價和bids
傳遞給asks
圖表以及每次刷新數據時如何刷新圖表? 提前致謝!
這是我每秒收到的數據示例,需要 plot:
var sampleData = [
[7062.24, 0.402181],
[7062.56, 2.472812],
[7062.59, 0.006595],
[7063.01, 1.2001],
[7063.27, 0.4],
[7063.28, 0.100615],
[7063.48, 0.4],
[7063.76, 0.086983],
[7063.83, 0.005],
[7064.19, 0.399752],
[7064.2, 1.70819],
[7064.41, 0.25],
[7064.43, 0.015026],
]
我准備了一個示例,其中圖表是用空數據呈現的,並且每隔一秒更新一次數據(模擬從 WebSocket 獲取數據)。
演示: https://jsfiddle.net/BlackLabel/zuhg390j/
events: {
load() {
let chart = this;
setTimeout(function() {
chart.series[0].update({
data: dataBids
}, false)
chart.series[1].update({
data: dataAsks
})
}, 1000)
}
}
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
您可以使用map
function 獲取每個series
數據如下
var data = [
[7062.24, 0.402181],
[7062.56, 2.472812],
[7062.59, 0.006595],
[7063.01, 1.2001],
[7063.27, 0.4],
[7063.28, 0.100615],
[7063.48, 0.4],
[7063.76, 0.086983],
[7063.83, 0.005],
[7064.19, 0.399752],
[7064.2, 1.70819],
[7064.41, 0.25],
[7064.43, 0.015026],
];
const asks = data.map(x => x[0]); //DATA TO USE ON THE CHART
const bids = data.map(x => x[1]); //DATA TO USE ON THE CHART
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src = "https://code.highcharts.com/highcharts.js"></script> <div id = "container"> </div> <script language = "javascript"> var data = [ [7062.24, 0.402181], [7062.56, 2.472812], [7062.59, 0.006595], [7063.01, 1.2001], [7063.27, 0.4], [7063.28, 0.100615], [7063.48, 0.4], [7063.76, 0.086983], [7063.83, 0.005], [7064.19, 0.399752], [7064.2, 1.70819], [7064.41, 0.25], [7064.43, 0.015026], ]; const asks = data.map(x => x[0]); //DATA TO USE ON THE CHART const bids = data.map(x => x[1]); //DATA TO USE ON THE CHART Highcharts.chart('container', { chart: { type: 'area', zoomType: 'xy' }, title: { text: 'ETH-BTC Market Depth' }, xAxis: { minPadding: 0, maxPadding: 0, }, yAxis: [{ lineWidth: 1, gridLineWidth: 1, title: null, tickWidth: 1, tickLength: 5, tickPosition: 'inside', labels: { align: 'left', x: 8 } }, { opposite: true, linkedTo: 0, lineWidth: 1, gridLineWidth: 0, title: null, tickWidth: 1, tickLength: 5, tickPosition: 'inside', labels: { align: 'right', x: -8 } }], legend: { enabled: false }, plotOptions: { area: { fillOpacity: 0.2, lineWidth: 1, step: 'center' } }, tooltip: { headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>', valueDecimals: 2 }, series: [{ name: 'Bids', data: bids, //HERE GOES THE DATA color: '#03a7a8' }, { name: 'Asks', data: asks, //HERE GOES THE DATA color: '#fc5857' }] }); </script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.