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

Question

我正在使用 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，其更新正确但该数据点未显示在图表上请帮帮我。

Answer 1

我在使用 Apex Chart 时也遇到了一些问题，但几个小时后，喝了很多杯咖啡，我发现这个例子中有一个很大的陷阱。在沙盒上使用了一个复杂的对象来填充数据。前任。让 chartOptions = { 系列：[名称：'test'，数据：[...]，...]，图表：{...}};

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

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

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

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

Apex chart not working properly with Angular

charts

angular

apexcharts