ページ複数のGoogleのグラフ

-1

私は現在、私のasp.net MVCのWebサイトに3つのGoogleグラフを表示しようとしています。ページ複数のGoogleのグラフ

私はこれらのグラフを他の（同じ行に）隣に置いておきたいと思いますが、現時点ではそれらを（同じ列に）他のものの下に表示させることはできません。次のコードは、一つだけのチャート（最初の1）を示している

...：

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

2番目に、 'drawChart（）'という2つの関数があります。 – DLeh

@DLehそれは 'charts/loaders.js'のままにしておき、' drawChart（） '関数の名前を変更しようとしましたが、何でも – MrPixel6

前回の回答で説明したように、チャートライブラリの登録に関する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

私は自分でこの解決策を実行しようとすると、なぜそれは動作していないと私はここで尋ねるときにそれは^^ 'ありがとう、あなたは@クラウンをありがとう！ – MrPixel6

ページ複数のGoogleのグラフ

答えて

関連する問題