Apex 蜡烛图未更新
Apex Candle Charts are not updating
我正在使用 apex charts in angular 创建蜡烛图。
我的 html 看起来是这样的:
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[title]="chartOptions.title"
></apx-chart>
我用样本数据初始化图表,以便我可以看到它的工作。当我尝试从我的 websocket 动态更新图表时,没有任何反应(示例数据仍然存在)
component.ts:
this.chartOptions = {
series: [{
name: "My-series",
data: this.getSampleData()
}],
chart: {
height: 350,
type: "candlestick"
},
title: { text: "BTC SMA Chart"},
xaxis: { type: 'datetime' }
};
this.connection.on("candlesReceived", (candleJson) => {
var candle = JSON.parse(candleJson);
console.log("open: " + candle.open + " high: "
+ candle.high + " low:" + candle.low + " close:" + candle.close);
this.data.push({ x:Date.parse(candle.timeStamp), y: [candle.open, candle.high, candle.low, candle.close]})
this.chartOptions.series = [{ data: this.data }]
})
根据 Documentation,更新所需要做的就是重新分配系列。然而那是行不通的。
如何动态更新我的图表以使其实时运行?
很难说为什么它对你提供的有限代码不起作用,但我创建了一个 fork 你提供的链接示例,我通过单击按钮附加到图表系列.
代码:
let data = this.chartOptions.series[0].data;
data.push({
x: new Date(1538894800000),
y: [6669.81, 6660.5, 6663.04, 6663.33]
});
this.chartOptions.series = [
{
data: data
}
];
另外 Date.parse(candle.timeStamp)
return 一个 int 值,我认为你想使用日期,所以你应该执行以下操作:
new Date(Date.parse(candle.timeStamp));
如果您在 websocket 事件上执行此操作,只需确保您访问的是正确的 chartOptions 实例,它应该可以正常工作。
您尝试过使用 ChangeDetectorRef 吗? :
import { ChangeDetectorRef } from '@angular/core';
constructor(private cd: ChangeDetectorRef) {}
this.connection.on("candlesReceived", (candleJson) => {
// ...
this.cd.detectChanges();
})
我正在使用 apex charts in angular 创建蜡烛图。
我的 html 看起来是这样的:
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[xaxis]="chartOptions.xaxis"
[title]="chartOptions.title"
></apx-chart>
我用样本数据初始化图表,以便我可以看到它的工作。当我尝试从我的 websocket 动态更新图表时,没有任何反应(示例数据仍然存在) component.ts:
this.chartOptions = {
series: [{
name: "My-series",
data: this.getSampleData()
}],
chart: {
height: 350,
type: "candlestick"
},
title: { text: "BTC SMA Chart"},
xaxis: { type: 'datetime' }
};
this.connection.on("candlesReceived", (candleJson) => {
var candle = JSON.parse(candleJson);
console.log("open: " + candle.open + " high: "
+ candle.high + " low:" + candle.low + " close:" + candle.close);
this.data.push({ x:Date.parse(candle.timeStamp), y: [candle.open, candle.high, candle.low, candle.close]})
this.chartOptions.series = [{ data: this.data }]
})
根据 Documentation,更新所需要做的就是重新分配系列。然而那是行不通的。
如何动态更新我的图表以使其实时运行?
很难说为什么它对你提供的有限代码不起作用,但我创建了一个 fork 你提供的链接示例,我通过单击按钮附加到图表系列.
代码:
let data = this.chartOptions.series[0].data;
data.push({
x: new Date(1538894800000),
y: [6669.81, 6660.5, 6663.04, 6663.33]
});
this.chartOptions.series = [
{
data: data
}
];
另外 Date.parse(candle.timeStamp)
return 一个 int 值,我认为你想使用日期,所以你应该执行以下操作:
new Date(Date.parse(candle.timeStamp));
如果您在 websocket 事件上执行此操作,只需确保您访问的是正确的 chartOptions 实例,它应该可以正常工作。
您尝试过使用 ChangeDetectorRef 吗? :
import { ChangeDetectorRef } from '@angular/core';
constructor(private cd: ChangeDetectorRef) {}
this.connection.on("candlesReceived", (candleJson) => {
// ...
this.cd.detectChanges();
})