Контейнер html не найден в createChild в amCharts Angular

Здесь, когда я нахожусь на той же странице, она загружает диаграмму. Но когда я нажимаю другую страницу и снова перехожу на эту страницу, диаграмма не загружается и отображается как контейнер html не найден в 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>

Я не мог найти причину здесь


angular amcharts4 ngoninit
person Hans    schedule 12.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы выполняете код в 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();
   }
person Minal Shah    schedule 12.08.2020
comment
Почему вы добавили эту часть в runOutsideAngular? - person Minal Shah; 12.08.2020
comment
попробуйте напрямую вызвать this.drawingChart в ngAfterViewInit () - person Minal Shah; 12.08.2020
comment
На самом деле эта вещь также не работает, когда я добавляю тайм-аут, она задерживается, и после этого отображается ошибка - person Hans; 12.08.2020
comment
ngAfterViewInit() { this.cardCheckingsChart(); } поставить так без ошибки - person Hans; 12.08.2020
comment
но при первой перезагрузке он не показывает график. при повторной загрузке он показывает график - person Hans; 12.08.2020
comment
@Hans Пожалуйста, сообщите, нашли ли вы какое-либо решение этой проблемы. Столкновение с той же проблемой с загрузкой amcharts при переходе на несколько страниц. - person Jay; 09.10.2020
comment
@Jay, если мы неправильно разместили графики, иногда возникает эта ошибка - person Hans; 15.10.2020