多個Google圖表第

-1

我正在嘗試在我的asp.net MVC網站上顯示3谷歌圖表。多個Google圖表第

我希望這些圖表與另一個圖表（在同一行上）相鄰，但目前我無法讓它們出現在另一個下面（在同一列上），我不知道爲什麼...

下面的代碼只顯示一個圖表（第一個）：

<div id="chart_divb"> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     google.charts.load('current', { packages: ['corechart'] }); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Mois'); 
      data.addColumn('number', 'Interventions'); 
      var [email protected](Json.Encode(ViewBag.chartToday)); 
      $.each(data1,function(index,value){ 
       data.addRows([[value.Item1, value.Item2]]); 
      }); 
      var options = {'title':'Total Interventions on @(DateTime.Now.Year-2)','width':400,'height':300,legend:{position:'none'}}; 
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_divb')); 
      chart.draw(data,options); 
     } 
    </script> 
</div> 
<div id="chart_diva"> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     google.charts.load('current', { packages: ['corechart'] }); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Mois'); 
      data.addColumn('number', 'Interventions'); 
      var [email protected]w(Json.Encode(ViewBag.chartToday)) 
      $.each(data1,function(index,value){ 
       data.addRows([[value.Item1, value.Item2]]); 
      }); 
      var options = {'title':'Total Interventions on @(DateTime.Now.Year-1)','width':400,'height':300,legend:{position:'none'}}; 
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_diva')); 
      chart.draw(data,options); 
     } 
    </script> 
</div> 


<div id="chart_div"> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     google.charts.load('current', { packages: ['corechart'] }); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Mois'); 
      data.addColumn('number', 'Interventions'); 
      var [email protected](Json.Encode(ViewBag.chartToday)) 
      $.each(data1,function(index,value){ 
       data.addRows([[value.Item1, value.Item2]]); 
      }); 
      var options = {'title':'Total Interventions on @DateTime.Now.Year','width':400,'height':300,legend:{position:'none'}}; 
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
      chart.draw(data,options); 
     } 
    </script> 
</div>

每個呼叫的工作（我可以看到它在源代碼中），但他們只是沒有顯示。

希望有人可以幫助我，並提前感謝您的幫助！

來源

2016-04-05 MrPixel6

首先，你不需要包括參考'圖表/ loaders.js'多次。就一次。 – DLeh

秒，你有兩個函數'drawChart（）' – DLeh

@DLeh好了我只保留一個'charts/loaders.js'，我已經試着改變函數'drawChart（）'的名字，但它不會改變任何東西 – MrPixel6

正如@DLeh在上一個答案中提到的，您應該遵循Google Charts關於註冊圖表庫的指導原則（https://developers.google.com/chart/interactive/docs/basic_load_libs）。您只需註冊腳本並一次加載圖表。

至於水平顯示3個圖表有多種方式可以通過CSS完成，但我只是用float：left作爲一個簡單的例子。

<html> 
<head> 
    <title></title> 
    <meta charset="utf-8"/> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

    <script type="text/javascript"> 
     google.charts.load('current', {packages: ['corechart']}); 
    </script> 
</head> 
<body> 
    <div> 
     <div id="chart_div1" style="float: left;"> 
      <script type="text/javascript"> 
       google.charts.setOnLoadCallback(drawChart); 

       function drawChart() { 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Mois'); 
        data.addColumn('number', 'Interventions'); 
        var data1 = @Html.Raw(Json.Encode(ViewBag.chartToday)); 
        $.each(data1, function(index, value) { 
         data.addRows([[value.Item1, value.Item2]]); 
        }); 
        var options = { 'title': 'Total Interventions on 1 @(DateTime.Now.Year - 2)', 'width': 400, 'height': 300, legend: { position: 'none' } }; 
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1')); 
        chart.draw(data, options); 
       } 
      </script> 
     </div> 
     <div id="chart_div2" style="float: left;"> 
      <script type="text/javascript"> 
       google.charts.setOnLoadCallback(drawChart); 

       function drawChart() { 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Mois'); 
        data.addColumn('number', 'Interventions'); 
        var data1 = @Html.Raw(Json.Encode(ViewBag.chartToday)); 
        $.each(data1, function(index, value) { 
         data.addRows([[value.Item1, value.Item2]]); 
        }); 
        var options = { 'title': 'Total Interventions on 2 @(DateTime.Now.Year - 1)', 'width': 400, 'height': 300, legend: { position: 'none' } }; 
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div2')); 
        chart.draw(data, options); 
       } 
      </script> 
     </div> 


     <div id="chart_div3" style="float: left;"> 

      <script type="text/javascript"> 
       google.charts.setOnLoadCallback(drawChart); 

       function drawChart() { 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Mois'); 
        data.addColumn('number', 'Interventions'); 
        var data1 = @Html.Raw(Json.Encode(ViewBag.chartToday)); 
        $.each(data1, function(index, value) { 
         data.addRows([[value.Item1, value.Item2]]); 
        }); 
        var options = { 'title': 'Total Interventions on 3 @DateTime.Now.Year', 'width': 400, 'height': 300, legend: { position: 'none' } }; 
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div3')); 
        chart.draw(data, options); 
       } 
      </script> 
     </div> 
    </div> 
</body> 
</html>

來源

2016-04-05 15:27:53 abrown

我不知道爲什麼當我嘗試自己做這個解決方案時，它不工作，當我在這裏問它時，確實是^^'謝謝@abrown！ – MrPixel6

多個Google圖表第

回答

相關問題