Несколько диаграмм Google на странице

-1

В настоящее время я пытаюсь отобразить 3 диаграммы google на моем веб-сайте asp.net MVC.Несколько диаграмм 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](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 Ok Я просто держу один 'chart/loaders.js', и я уже пытался изменить имя функций' drawChart() ', но он не изменяется ничего – MrPixel6

Как упоминалось в предыдущем ответе @DLeh, вы должны следовать рекомендациям Google Chart по регистрации библиотеки диаграмм (https://developers.google.com/chart/interactive/docs/basic_load_libs). Вам нужно только зарегистрировать скрипт и загрузить график за один раз.

Что касается отображения трех диаграмм вместе по горизонтали, это можно сделать с помощью CSS, но я просто использовал float: оставленный как быстрый пример.

<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 на странице

ответ

Смежные вопросы