Angular Apex CharError：<g>属性转换：预期数字，“翻译（NaN，0）”

Question

我正在使用 Angular，并且我有一个带有一张图表的页面。该图表工作正常，但是当我导航到另一个页面时，控制台中出现以下错误：

我尝试了一些解决方案，但没有任何效果。

这是我加载图表的代码：

private renderCharts(): void {
this.averageProductionChartService.value = [this.machineResults.effectiveness.averageProduction.value * 100 / this.machineResults.effectiveness.averageProduction.totalSize];

if (!this.averageProductionChart) {
  this.averageProductionChartService.createChart();

  this.averageProductionChart = new ApexCharts(document.querySelector("#average-production-chart"), this.averageProductionChartService.averageProductionChart);
  this.averageProductionChart.render();
}
else {
  this.averageProductionChart.updateOptions({
    labels: this.averageProductionChartService.label,
    series: this.averageProductionChartService.value
  });
}
}

这是我创建图表的代码：

export class AverageProductionChartService {

  averageProductionChart!: Partial<ApexCharts.ApexOptions>;
  label!: string[];
  value!: number[];

  createChart(): void {
    this.averageProductionChart = {
      series: this.value,
      chart: {
        height: 250,
        offsetY: -15,
        type: "radialBar",
      },
      plotOptions: {
        radialBar: {
          startAngle: -90,
          endAngle: 90,
          dataLabels: {
            name: {
              fontSize: "20px",
              fontFamily: "Inter",
              color: "#FFF",
              fontWeight: "600"
            },
            value: {
              show: false
            }
          }
        }
      },
      labels: this.label,
      fill: {
        colors: ["#39CDDB"],
        type: "solid"
      },
      states: {
        hover: {
          filter: {
            type: 'none',
          },
        },
        active: {
          allowMultipleDataPointsSelection: false,
          filter: {
            type: 'none'
          }
        },
      }
    };
  }
}

Answer 1

问题与图表的破坏有关，这个解决方案对我有用：

https://github.com/apexcharts/apexcharts.js/issues/2270