Apex 蠟燭圖未更新

Question

我在 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 }]
})

根據文檔，您更新所需要做的就是重新分配系列。 然而，這是行不通的。

如何動態更新我的圖表以使其實時運行？

Answer 1

很難說為什么它不適用於您提供的有限代碼，但我通過單擊按鈕創建了您提供的鏈接示例的分支，其中我 append 到圖表系列。

代碼：

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)返回一個 int 值，而不是我認為您想使用日期，因此您應該執行以下操作：

new Date(Date.parse(candle.timeStamp));

如果您在 websocket 事件上執行此操作，只需確保您訪問的是正確的 chartOptions 實例，它應該可以正常工作。

Answer 2

您是否嘗試使用 ChangeDetectorRef？ ：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cd: ChangeDetectorRef) {}

this.connection.on("candlesReceived", (candleJson) => {
  // ...
  this.cd.detectChanges();
})