Apex 图表无法与 Angular 一起正常工作

如何解决Apex 图表无法与 Angular 一起正常工作

我正在使用 https://github.com/apexcharts/ng-apexcharts。

我无法在库中使用核心 ApexCharts 方法。虽然自述文件建议我们可以使用“appendData”方法，但是当我尝试以下列方式使用时：

chart.component.html

<apx-chart #chartObj></apx-chart>

chart.component.ts

@ViewChild('chartObj',{static: false}) chart: ChartComponent;

method(data){
    this.chart().appendData([{
        data: [Date.Now(),data]
      }])
}

我在 Chrome 控制台上收到错误消息：无法读取未定义的属性“appendData” 我已经尝试使用图表选项进行更新。

this.chartOptions = {
      series: [
        {
          name: "current",data: []
        }
      ],chart: {
        type: "line",height: 300
      },stroke: {
        width: 2,curve: "smooth"
      },xaxis: {
        type: "datetime"
      }
    };

当我尝试使用以下代码将数据推送到图表时：

this.chartOptions.series[0].data.push([Date.Now(),data]);

也试过这个

this.chartOptions.series[0].data.push({x: new Date(),y: data});

如果我在 ngOnInit 中使用它，数据只会在图表中插入一次。 但是我想在不起作用的按钮单击上使用这种行为。 单击按钮后在控制台上打印 chartOptions，它更新正确，但此数据点未显示在图表上 请帮帮我。

解决方法

我在使用 Apex Chart 时也遇到了一些问题，但几个小时后，喝了很多杯咖啡，我发现这个例子有一个很大的陷阱。 在沙箱上使用了一个复杂的对象来填充数据。 前任。 let chartOptions = { series: [ name: 'test',data: [...],... ],chart: {...} };

第 1 步：从另一个变量中删除系列.. 公共图表选项 = { ... } public _series = [名称：'测试'，数据：[...]，...]

第 2 步：将 html 示例替换为您的新变量

第 3 步：修改您的代码以替换“_series”值 this.requestFromMyApi.subscribe( res => this._series = [name: 'test',data: res.map( r => { x: r.date,y: r.value } )] );