javascript - google-visualization-errors : container is null. 消息:一名或多名参与者未能绘制()

Question

我尝试在网络应用中使用 Google 仪表板，但收到以下错误。

google-visualization-errors: container is null. message: One or more participants failed to draw()

我的代码类似于 Google Documentation代码建议，但我仍然面临错误。

我的 JS(通过 C# 生成)-

<script type='text/javascript'>
    google.charts.load('current', {
        'packages': ['corechart', 'controls']});

    google.charts.setOnLoadCallback(drawDashboard);

    function drawDashboard() {

        var data = google.visualization.arrayToDataTable([
            ['Status', 'Count'],
            ['Closed', 671],
            ['Resolved', 5],
            ['Test', 3]
        ]); //test///
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

      var slider = new google.visualization.ControlWrapper({
            'controlType': 'NumberRangeFilter',
            'containerId': 'filter_div',
            'options': {
                'filterColumnLabel': 'Count'
            }
        });

        var pieChart = new google.visualization.ChartWrapper({
            'chartType': 'PieChart',
            'containerId': 'divIncidentStatus',
            'options': {
                'width': 300,
                'height': 300,
                'pieSliceText': 'value',
                'legend': 'right'
            }
        });

        dashboard.bind(slider, pieChart);
        dashboard.draw(data);

    }
</script>

HTML

 <div class="panel panel-default">
        <div class="panel-body">
            <div class="dashboard_div">
                <div class="filter_div"></div>
                <div id="divIncidentStatus"></div>
            </div>

        </div>
    </div>

P.S - 我尝试在 HTML DIV 之前和之后调用 JS 代码，但没有任何帮助。

Answer 1

看起来像是一个错字
需要设置id属性，而不是class
在 dashboard_div 和 filter_div

而不是...

    <div class="dashboard_div">
      <div class="filter_div"></div>
      <div id="divIncidentStatus"></div>
    </div>

更改为...

    <div id="dashboard_div">
      <div id="filter_div"></div>
      <div id="divIncidentStatus"></div>
    </div>

请参阅以下工作片段...

google.charts.load('current', {
  'callback': function () {
    var data = google.visualization.arrayToDataTable([
      ['Status', 'Count'],
      ['Closed', 671],
      ['Resolved', 5],
      ['Test', 3]
    ]);
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
    var slider = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'filter_div',
      'options': {
        'filterColumnLabel': 'Count'
      }
    });
    var pieChart = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'divIncidentStatus',
      'options': {
        'width': 300,
        'height': 300,
        'pieSliceText': 'value',
        'legend': 'right'
      }
    });
    dashboard.bind(slider, pieChart);
    dashboard.draw(data);
  },
  'packages': ['corechart', 'controls']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    <div id="dashboard_div">
      <div id="filter_div"></div>
      <div id="divIncidentStatus"></div>
    </div>
  </div>
</div>