在 amCharts Angular 的 createChild 中找不到 html 容器

Posted 2023-03-13

【中文标题】在 amCharts Angular 的 createChild 中找不到 html 容器

【英文标题】：html container not found at createChild in amCharts Angular

【发布时间】：2020-12-02 04:50:55

【问题描述】：

在这里，当我在同一页面时，它会加载图表。但是当我单击另一个页面并再次来到此页面时，图表没有加载，它显示为 html container not found 在 createChild 处

但是如果我再次重新加载相同的页面图表会出现。

这是我的 component.ts 文件。

constructor( private zone: NgZone) 


ngOnInit() 
    this.zone.runOutsideAngular(() => 

          this.drawingChart();
    );
  

drawingChart() 
    am4core.useTheme(am4themesAnimated);
    const container = am4core.create('div1', am4core.Container);
    container.width = am4core.percent(100);
    container.height = am4core.percent(100);
    const chart = container.createChild(am4charts.XYChart);
    chart.padding(0, 0, 0, 0);

    chart.data = [
      
        date: '2012-07-27',
        value: 13
      ,   
        date: '2012-12-28',
        value: 50
      , 
        date: '2012-12-29',
        value: 51
      , 
        date: '2013-01-30',
        value: 81
      ];
    chart.colors.list = [
      am4core.color('rgba(4, 69, 142, 1)'),
    ];

    const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    valueAxis.renderer.grid.template.disabled = true;
    valueAxis.renderer.labels.template.disabled = true;
    dateAxis.renderer.grid.template.disabled = true;
    dateAxis.renderer.labels.template.disabled = true;

    const series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = 'value';
    series.dataFields.dateX = 'date';
    series.tooltipText = 'value';
    series.fillOpacity = 1;
    series.strokeWidth = 2;
    series.minBulletDistance = 15;
  

这是我的html文件

<div class="col-10 col-sm-3-2 col-md-3-2 col-lg-7-6">
  <div class="l-content-wrapper ">
    <div class="a-title">
      <div class="a-title-content">
        <div class="a-title-content-main">Chart</div>
      </div>
    </div>
    <div id="div1" class="graph_area graph_area__500">
    </div>
  </div>
</div>

我在这里找不到原因

【参考方案1】：

当您在 ngOnInit() 中的代码被执行时，直到那时您的 html 都不会呈现，所以当您想要访问 div1 时，它会变得未定义。

所以尝试将您的代码移动到 ngAfterViewInit() 中。这应该可以解决您的问题。 如果没有，您可以尝试在其中添加一些超时，以便在此之前您的 div 被渲染。

请参考以下代码：

        ngOnInit() 
           
          
        ngAfterViewInit()
           this.getDiv()
       
    getDiv()
      if(!this.div)
        this.div = document.getElementById("div1");
        if(!this.div)
setTimeout(()=>
         this.getDiv()
          ,200)
          return
          
        this.drawingChart();
    

【讨论】：

为什么在runOutsideAngular中添加了这部分？

尝试在ngAfterViewInit()中直接调用this.drawingChart

实际上，当我添加超时时，它也不起作用，它会延迟&之后显示错误

ngAfterViewInit() this.cardCheckingsChart(); 这样放没有错误

但是第一次重新加载它不显示图表。再次重新加载它显示图表