google-visualization-errors：コンテナがnullです。メッセージ：1人または複数の参加者が描画に失敗しました（）

Question

私はWebアプリケーションでGoogleダッシュボードを使用しようとしていますが、次のエラーが発生しています。

google-visualization-errors：container is null。メッセージ：1人のまたは複数の参加者が描画するのに失敗した（）

私のコードはGoogle Documentationコードを示唆するものに似ているが、私はまだエラーに直面しています。

（C＃のを経由して生成された）私のJS -

<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

タイプミス
が

...へ dashboard_divと filter_div

代わりに...

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

の変化の両方に代わりclass
の、id属性を設定する必要があるように見えます

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