Question

我在我的角度应用程序中使用了图表。即使我的图表在负载下呈现，我的控制台中仍然出现高图＃error-13。

我正在ngOnInit生命周期挂钩中调用渲染图方法。我还添加了检查以验证仅在数据可用时才应调用该方法。

我的html： <div [attr.id]="chartContainerID" class="chart-container mt-0"></div>

我的ts文件：

export class MyComponent implements OnInit, {
  chartContainerId: string;

  constructor(private xrangechart: XrangeChartService, ) {
    if (!this.chartContainerId) {
    this.chartContainerId = String(Math.random());
  }}

  ngOnInit() {
    // to do call the service here.
    this.getData();
  }

  renderChart(chartOptions: any) {
    const chart = this.xrangechart.renderChart(this.chartContainerId, chartOptions);
    if (chart) {
       this.plotShapes(chart);
    }
 }
 getData() {
   this.dataservice.subscribe(data => {
    if (data !== null && data !== undefined &) {
      console.log(data);
      this.dataReturned = data;
      this.renderChart(this.setChartOptions());
    }
  });
}


  setChartOptions() {
    const chartOptions: any = {};
    // Setting chart height
    chartOptions.height = 300;
    // Setting the click event on the label
    chartOptions.data = this.dataReturned.data;
    // to set the yaxis
    chartOptions.yAxis = {
        gridLineWidth: chartContainer.gridLineWidth,
        margin: 0,
        title: {
            text: ''
        },
        categories: this.data.categories,
        reversed: true
      };
    return chartOptions;
  }


  plotShapes(chart: any) {
    // some logic to plot shape
}

}

预期：控制台中不应出现错误，并且图表应正确呈现

Answer 1

由于找不到要绘制图表的容器而出现此错误。像：

<div [attr.id]="chartContainerID" class="chart-container mt-0"></div>

在呈现图表之前，请确保您的div具有id属性。 div具有id属性后，您必须调用图表渲染方法。因为作为代码的种子，您的id中有动态的div。

图表绘制后，highcharts错误-13

1 个答案: