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

Question

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

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

chart.component.html

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

图表.组件.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 中使用数据，则数据仅在图表中插入一次。 但我想在按钮单击时使用此行为，但该行为不起作用。 单击按钮后在控制台上打印图表选项，其更新正确，但该数据点未显示在图表上 请帮帮我。

Answer 1

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

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

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

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

Answer 2

import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  Input,
  OnInit,
  ViewChild,
} from "@angular/core";
import { BehaviorSubject } from "rxjs";
import moment from "moment-timezone";

import { ChartComponent, NgApexchartsModule } from "ng-apexcharts";

import { TransactionSummaryModel } from "../../../../../../../shared/models/transaction-summary.model";

@Component({
  selector: "app-service-type-chart",
  templateUrl: "./service-type-chart.component.html",
  styleUrls: ["./service-type-chart.component.scss"],
  standalone: true,
  imports: [NgApexchartsModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ServiceTypeChartComponent implements OnInit {
  @ViewChild("chart") chart: ChartComponent;
  @Input() data$: BehaviorSubject<TransactionSummaryModel[]> =
    new BehaviorSubject<TransactionSummaryModel[]>([]);

  public chartOptions: Partial<any>;
  public _series = [{ name: "prices", data: [] }];
  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.chartOptions = this.getChartOptions();
    this.data$.subscribe((value) => {
      this.chartOptions = this.getChartOptions();
      this._series[0].data = value.map((item) => ({
        x: moment(item.date).format("LL"),
        y: item.totalPrice,
      }));
      this.cdr.detectChanges();
    });
  }

  private getChartOptions(): Partial<any> {
    return {
      series: this._series,
      chart: {
        type: "area",
        height: 400,
        toolbar: {
          show: false,
        },
      },
      plotOptions: {
        area: {
          fillTo: "origin",
          line: {
            curve: "smooth",
          },
        },
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        show: true,
        width: 2,
        colors: ["transparent"],
      },
      xaxis: {
        tickPlacement: "on",
      },
      yaxis: {
        title: {
          text: "Total",
        },
      },
      fill: {
        opacity: 0.5,
      },
      tooltip: {
        y: {
          formatter: function (val) {
            return "₺ " + val;
          },
        },
      },
    };
  }
}

当新数据到达时重新初始化 ChartOptions，然后运行 cdr.detectChanges()。