Angular中ng-apexcharts的appendData正确使用及数据更新问题

我开发的是Angular/FastAPI应用，需要在WebSocket收到新数据时更新单系列蜡烛图。目前数据接收正常，但调用appendData向series添加数据无效果，已验证图表渲染正常、数据有效，静态设置数据时图表显示正常，但series长度始终为1。

组件构造器代码 #

constructor(private binance: BinanceService) {

  this.chartOptions = {
    series: [
      {
        name: "candle",
        data: [
          {
            x: new Date(1538778600000),
            y: [6629.81, 6650.5, 6623.04, 6633.33]
          }
        ]
      }
    ],
    chart: {
      type: "candlestick",
      height: '800',
      width: '100%',
      redrawOnParentResize: true,
    },
    title: {
      text: "CandleStick Chart",
      align: "left"
    },
    xaxis: {
      type: "datetime"
    },
    yaxis: {
      tooltip: {
        enabled: true
      }
    },
    tooltip: {
      enabled: true,
      custom: function({ seriesIndex, dataPointIndex, w }) {
        const o = w.globals.seriesCandleO[seriesIndex][dataPointIndex]
        const h = w.globals.seriesCandleH[seriesIndex][dataPointIndex]
        const l = w.globals.seriesCandleL[seriesIndex][dataPointIndex]
        const c = w.globals.seriesCandleC[seriesIndex][dataPointIndex]

        return (
          '<div class="apexcharts-tooltip-candlestick">' +
          '<div>Open: <span class="value">' +
          o +
          '</span></div>' +
          '<div>High: <span class="value">' +
          h +
          '</span></div>' +
          '<div>Low: <span class="value">' +
          l +
          '</span></div>' +
          '<div>Close: <span class="value">' +
          c +
          '</span></div>' +
          '</div>'
        )
      },
      theme: 'dark'
    }
  };
  
  this.socketSubscription = this.binance.onNewCandle().subscribe(params => {
    if(this.rendered) {  
      console.log(params)
      this.chart.appendData([
        {
          data: 
          {
            x: new Date(params.date),
            y: [params.open, params.high, params.low, params.close] 
          }
        }
      ]);

      console.log(this.chart.series)
    }
  }
);  
}

模板代码（mainchart.component.html） #

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

疑问 #

1. appendData是否会自动判断x值，不存在则追加、存在则更新？
2. 多series场景下，是否可通过如下方式分别更新不同series？

this.chart.appendData([
  {                                                                   
    data:                                                              
    {                                                                  
      x: new Date(params.date),                                        
      y: [params.open, params.high, params.low, params.close]          
    }                                                                  
  },
  {                                                                   
    data:                                                              
    {                                                                  
      x: new Date(params.date),                                        
      y: [params.open, params.high, params.low, params.close]          
    }                                                                  
  }                                                                    
]);

解决方案与答疑 #

核心问题修正 #

你当前的实现存在两个关键错误：

1. 图表实例获取方式错误：在Angular中使用ng-apexcharts时，必须通过ViewChild获取真实的图表实例，直接使用模板变量#chart无法正确调用实例方法。
2. appendData参数格式错误：蜡烛图的appendData要求每个系列的data字段是数组格式（即使只添加单个数据点），而非单个对象。

修正后的组件代码

import { Component, ViewChild, OnInit } from '@angular/core';
import { ChartComponent, ApexOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-mainchart',
  templateUrl: './mainchart.component.html',
  styleUrls: ['./mainchart.component.css']
})
export class MainchartComponent implements OnInit {
  @ViewChild('chart') chart!: ChartComponent;
  chartOptions: ApexOptions;
  rendered = false;
  socketSubscription: any;

  constructor(private binance: BinanceService) {
    this.chartOptions = {
      // 保留原有的chartOptions配置
      series: [
        {
          name: "candle",
          data: [
            {
              x: new Date(1538778600000),
              y: [6629.81, 6650.5, 6623.04, 6633.33]
            }
          ]
        }
      ],
      chart: {
        type: "candlestick",
        height: '800',
        width: '100%',
        redrawOnParentResize: true,
      },
      title: {
        text: "CandleStick Chart",
        align: "left"
      },
      xaxis: {
        type: "datetime"
      },
      yaxis: {
        tooltip: {
          enabled: true
        }
      },
      tooltip: {
        enabled: true,
        custom: function({ seriesIndex, dataPointIndex, w }) {
          const o = w.globals.seriesCandleO[seriesIndex][dataPointIndex]
          const h = w.globals.seriesCandleH[seriesIndex][dataPointIndex]
          const l = w.globals.seriesCandleL[seriesIndex][dataPointIndex]
          const c = w.globals.seriesCandleC[seriesIndex][dataPointIndex]

          return (
            '<div class="apexcharts-tooltip-candlestick">' +
            '<div>Open: <span class="value">' + o + '</span></div>' +
            '<div>High: <span class="value">' + h + '</span></div>' +
            '<div>Low: <span class="value">' + l + '</span></div>' +
            '<div>Close: <span class="value">' + c + '</span></div>' +
            '</div>'
          )
        },
        theme: 'dark'
      }
    };
  }

  ngOnInit() {
    this.socketSubscription = this.binance.onNewCandle().subscribe(params => {
      if(this.rendered && this.chart) {  
        console.log(params);
        // 修正appendData的参数格式
        this.chart.appendData([
          {
            data: [
              {
                x: new Date(params.date),
                y: [params.open, params.high, params.low, params.close] 
              }
            ]
          }
        ]);
        console.log(this.chart.series);
      }
    });
  }

  // 监听图表渲染完成事件，确保rendered状态准确
  onChartRendered() {
    this.rendered = true;
  }
}

修正后的模板代码

<apx-chart #chart 
           [series]="chartOptions.series"
           [chart]="chartOptions.chart"
           [xaxis]="chartOptions.xaxis"
           [yaxis]="chartOptions.yaxis"
           [title]="chartOptions.title"
           [tooltip]="chartOptions.tooltip"
           (chartRender)="onChartRendered()">
</apx-chart>

疑问解答 #

1. appendData不具备自动判断x值的能力：它只会直接将数据追加到对应series的末尾。如果需要更新已有x值的数据点，需手动找到对应数据点修改后，调用updateSeries方法更新整个系列。
2. 多series场景下可按索引分别更新：你给出的写法是可行的，数组中的第n个对象对应更新第n个series，但需注意每个对象的data字段必须是数组格式，示例如下：

this.chart.appendData([
  {
    data: [
      { x: new Date(params.date), y: [params.open, params.high, params.low, params.close] }
    ] // 更新series[0]
  },
  {
    data: [
      { x: new Date(params.date), y: [params.open2, params.high2, params.low2, params.close2] }
    ] // 更新series[1]
  }
]);

内容的提问来源于stack exchange，提问作者IgnacyP