J'utilise des graphiques apex en angulaire pour créer un chandelier graphique.

Mon html ressemble à ceci :

<apx-chart
  [series]="chartOptions.series"
  [chart]="chartOptions.chart"
  [xaxis]="chartOptions.xaxis"
  [title]="chartOptions.title"
></apx-chart>

J'initialise le graphique avec des exemples de données afin que je puisse le voir fonctionner. Lorsque j'essaie de mettre à jour dynamiquement le graphique à partir de mon websocket, rien ne se passe (l'exemple de données persiste) 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 }]
})

Selon la Documentation, tout ce que vous avez à faire pour mettre à jour est de réaffecter la série. Cependant cela ne fonctionne pas.

Comment mettre à jour dynamiquement mon graphique pour qu'il fonctionne en temps réel ?

0
johnny 5 10 mars 2021 à 02:54

2 réponses

Meilleure réponse

Il est difficile de dire pourquoi cela ne fonctionne pas pour vous avec le code limité que vous avez fourni mais j'ai créé un fork de l'échantillon lié que vous avez donné où j'ajoute à la série de graphiques en cliquant sur un bouton.

Code:

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
  }
];

De plus, Date.parse(candle.timeStamp) renvoie une valeur int, au lieu de cela, je pense que vous souhaitez utiliser une date, vous devez donc procéder comme suit :

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

Si vous faites cela sur un événement websocket, assurez-vous simplement que vous accédez à la bonne instance de chartOptions et cela devrait fonctionner correctement.

2
johnny 5 18 mars 2021 à 01:24

Avez-vous essayé d'utiliser ChangeDetectorRef ? :

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

constructor(private cd: ChangeDetectorRef) {}

this.connection.on("candlesReceived", (candleJson) => {
  // ...
  this.cd.detectChanges();
})
0
Gauthier T. 16 mars 2021 à 18:33