Ошибка: контейнер не определен в gvjs_dp GeoChart в Angular - PullRequest
Новая
       21

Ошибка: контейнер не определен в gvjs_dp GeoChart в Angular

0 голосов
/ 17 декабря 2018

Вот мой HTML-код: 

<div id="geochart" #geochart> </div>

Вот мой TS-код: 

ngOnInit() {
  google.charts.load('current', {'packages':['corechart','geochart'], mapsApiKey: 'XXXXmyAPIKEYXXXX'});

this.http.post(url,data,{responseType: 'text'})
 .subscribe(
    data => {
      this.geoChartArray = JSON.parse(data).data;
      this.drawGeoChart();
    },
    error => {
      console.log(error);
    });
}


drawGeoChart() {
   var geo_1_options = { is3D: true };   
   var geo_1_data = google.visualization.arrayToDataTable(this.geoChartArray);
   var domElement = document.getElementById('geochart');
   var geo_1_chart = new google.visualization.GeoChart(domElement);
   geo_1_chart.draw(geo_1_data, geo_1_options);
}

Иногда GeoChart загружается, а иногда я получаю эту ошибку.Я не могу понять, что именно вызывает ошибку.

Ответы [ 3 ]

0 голосов
/ 22 декабря 2018

, прежде чем рисовать диаграмму, нужно подождать загрузки страницы и диаграмм Google.
оператор загрузки Google будет ожидать загрузки страницы по умолчанию.

Вы можете установить «on load» callback в операторе загрузки,
, затем получить данные,
и нарисовать диаграмму.

см. Следующий фрагмент ... 

ngOnInit()
{
  google.charts.load('current', {
    packages: ['corechart','geochart'],
    mapsApiKey: 'XXXXmyAPIKEYXXXX',
    callback: this.getData
  });
}

getData()
{
  this.http.post(url,data,{responseType: 'text'})
    .subscribe(
      data =>
        {
          this.geoChartArray = JSON.parse(data).data;
          this.drawGeoChart();

        },
      error =>
        {
          console.log(error);
        }
    );
}

drawGeoChart()
{
  var geo_1_options = { is3D: true };
  var geo_1_data = google.visualization.arrayToDataTable(this.geoChartArray);
  var domElement = document.getElementById('geochart');
  var geo_1_chart = new google.visualization.GeoChart(domElement);
  geo_1_chart.draw(geo_1_data, geo_1_options);
}
0 голосов
/ 26 декабря 2018

Вы пытались переместить свой код в ngAfterViewInit?А также не использует DOM API напрямую: 

@ViewChild('geochart') geochartEl: ElementRef;
ngAfterViewInit() {
  this.http...subscribe(() => {

  })
}

draw(...)  {
  const domElement = this.geochartEl.nativeElement;
  ...
}
0 голосов
/ 20 декабря 2018

Я думаю, вам нужно установить google.charts.setOnLoadCallback();, основываясь на взгляде на скрипку, представленную в документации (https://developers.google.com/chart/interactive/docs/gallery/geochart).

Попробуйте вот так: 

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'XXXXmyAPIKEYXXXX'
});

google.charts.setOnLoadCallback(drawGeoChart);

this.http.post(url,data,{responseType: 'text'})
 .subscribe(
    data => {
      this.geoChartArray = JSON.parse(data).data;
      this.drawGeoChart();
    },
    error => {
      console.log(error);
    });
}

drawGeoChart() {
  var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

  var options = {};

  var chart = new google.visualization.GeoChart(document.getElementById('geochart'));

  chart.draw(data, options);
}
...