ApexCharts 无法读取未定义的属性“appendSeries”

Question

我正在尝试向我的 ApexCharts（在 ngOnInit 中）添加一个新系列，但它一直告诉我，我的图表未定义，即使我在构造函数中对其进行了初始化。我选择了“多个系列-组行”图表，您可以在以下链接中找到它。 https://apexcharts.com/angular-chart-demos/timeline-charts/multiple-series-group-rows/

@Component({
  selector: "app-gantt",
  templateUrl: "./gantt.component.html",
  styleUrls: ["./gantt.component.css"]
})
export class GanttComponent implements OnInit {
  @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {
    this.chartOptions = {
      series: [
        {
          name: "John Adams",
          data: [
            {
              x: "President",
              y: [
                new Date(1797, 2, 4).getTime(),
                new Date(1801, 2, 4).getTime()
              ]
            },
            {
              x: "Vice President",
              y: [
                new Date(1789, 3, 21).getTime(),
                new Date(1797, 2, 4).getTime()
              ]
            }
          ]
        }    
      ],
      chart: {
        height: 350,
        type: "rangeBar"
      },
      plotOptions: {
        bar: {
          horizontal: true,
          barHeight: "50%",
          rangeBarGroupRows: true
        }
      },
      colors: [
        "#1B998B",
        "#2E294E",
        "#F46036",
        "#E2C044"
      ],
      fill: {
        type: "solid"
      },
      xaxis: {
        type: "datetime"
      },
      legend: {
        position: "right"
      },
      tooltip: {
        custom: function (opts) {
          const fromYear = new Date(opts.y1).getFullYear();
          const toYear = new Date(opts.y2).getFullYear();
          const values = opts.ctx.rangeBar.getTooltipValues(opts);

          return (
            '<div class="apexcharts-tooltip-rangebar">' +
            '<div> <span class="series-name" style="color: ' +
            values.color +
            '">' +
            (values.seriesName ? values.seriesName : "") +
            "</span></div>" +
            '<div> <span class="category">' +
            values.ylabel +
            ' </span> <span class="value start-value">' +
            fromYear +
            '</span> <span class="separator">-</span> <span class="value end-value">' +
            toYear +
            "</span></div>" +
            "</div>"
          );
        }
      }
    };
  }

  ngOnInit() {
    this.chart.appendSeries([{
      name: "George Washington",
      data: [
        {
          x: "President",
          y: [
            new Date(1789, 3, 30).getTime(),
            new Date(1797, 2, 4).getTime()
          ]
        }
      ]
    }])
  }
}

Answer 1

ngOnInit 使用 @ViewChild 访问元素可能为时过早。它们可能还没有被渲染。你有两个选择

1. 设置static: true，以便在渲染之前可以访问变量（仅限Angular v9+）。请参阅here 了解更多信息。

@ViewChild("chart", { static: true }) chart: ChartComponent;

1. 或者使用AfterViewInit钩子。

export class GanttComponent implements AfterViewInit {
  @ViewChild("chart") chart: ChartComponent;
  ...

  ngAfterViewInit() {
    this.chart.appendSeries([{
      ...
    }]);
  }
}