Question

我是一个天真的React开发人员，在使用React的gooogle图表工作时遇到了一些困难。我在带有ControlWrapper的ReactJs组件中使用Google图表，如下所示。

componentDidMount: function(){
google.charts.load('current', {'packages':['corechart', 'controls']});
this.drawCharts();
},
componentDidUpdate: function(){
 google.charts.load('current', {'packages':['corechart', 'controls']});
this.drawCharts();
},
drawCharts: function(){
var cmpt = this;
//Removed detailed code from here due to copyright issues

//adding controls----------------

  let dashboard = new google.visualization.Dashboard( document.getElementById(cmpt.props.widgetId) );
  let controlId = '${this.props.widgetId}_control';
  var controlWrapper = new google.visualization.ControlWrapper({
    'controlType' : 'NumberRangeFilter',
    'containerId' : controlId,
    'options' : {
      'filterColumnLabel' : xDataSysName
    }
  });
  var barChart = new google.visualization.ChartWrapper({
    'chartType': 'BarChart',
    'containerId': this.props.widgetId,
    'options': options
  });

  dashboard.bind(controlWrapper, barChart);
  dashboard.draw(data);

  if(linkColumn){
    let selectionEventHandler = function() {
      window.location = data.getValue(barChart.getSelection()[0]['row'], 1 );
    };
      google.visualization.events.addListener(barChart, 'select', selectionEventHandler);
   }
  }
},

这不是全部代码，但对于我所面临的问题应该足够了。

第一次加载页面时，控制台中显示错误消息

google.visualization.Dashboard is not a constructor

我重新加载页面，并按SHIFT + F5键，错误消失了，组件加载也很好，除了那些依赖controlWrapper抛出错误的组件外

google.visualization.controlWrapper is not a constructor

即使重新加载页面也永远不会消失。我参考了this的讨论并尝试了其解决方案，但是我仍然以上述方式遇到这些错误。请帮助我找出解决方法。另外，我无法理解为什么dashboard错误在重新加载时消失了。

Answer 1

需要等到Google图表完全加载后才能尝试使用任何构造函数，
这是通过提供回调函数来完成的。

尝试如下更改load语句...

componentDidMount: function(){
  google.charts.load('current', {packages:['corechart', 'controls'], callback: this.drawCharts});
},
componentDidUpdate: function(){
  google.charts.load('current', {packages:['corechart', 'controls'], callback: this.drawCharts});
},

Google图表出现“仪表板不是构造函数”错误

1 个答案: