Question

我正在尝试在我的网络应用中使用Google信息中心，但我收到以下错误消息。

google-visualization-errors：容器为空。消息：一个或多个参与者未能绘制（）

我的代码与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>

请参阅以下工作代码段...

＆＃13;

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']
});

＆＃13;

<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>

＆＃13;

google-visualization-errors：容器为空。消息：一个或多个参与者未能绘制（）

1 个答案: