Question

我无法在一个页面中显示两个条形图。我尝试了两种方法，在一个<script>部分中的两个<script>部分中实现这些部分。如果显示一个，如果我对<div> id进行了更改，则另一个未显示，反之亦然，但两者都不会同时显示。我也试过可视化版本更改。当我看到页面源代码时，我会看到两个图形的所有数据，但只创建了图形。可能是什么问题。我已经尝试了很多，但无法调试，最后我在这里。以下是我的代码。

<script type="text/javascript">
  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['bar']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
 function drawChart() {

// Create the data table.
var data1 = google.visualization.arrayToDataTable([
['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
    <?php 
       foreach ($log_book_discrepancy as $log_book)
        {
          ?>
            ["<?php echo trim($log_book->type_of_vessel); ?>", <?php echo trim($log_book->fuel_hsfo); ?>, <?php echo trim($log_book->fuel_lsfo); ?>, <?php echo trim($log_book->fuel_mgo); ?> ],
          <?php
        }
    ?>
]);
// Create the data table.
var data2 = google.visualization.arrayToDataTable([
['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
    <?php 
    foreach ($bunker_found as $bunker)
        {
            ?>
                ["<?php echo trim($bunker->type_of_vessel); ?>", <?php echo trim($bunker->fuel_hsfo); ?>, <?php echo trim($bunker->fuel_lsfo); ?>, <?php echo trim($bunker->fuel_mgo); ?> ],
            <?php
        }
    ?>
]);

// Set chart options
var options1 = {
    chart: {
      title: 'Log Book Discrepancy',
      subtitle: 'HSFO, LSFO, and MGO',
    }
  };
// Set chart options
var options2 = {
        chart: {
          title: 'Bunkers Found',
          subtitle: 'HSFO, LSFO, and MGO',
        }
      };

// Instantiate and draw our chart, passing in some options.
var chart1 = new  
google.charts.Bar(document.getElementById('log_book_discrepancy'));
chart1.draw(data1, options1);
var chart2 = new     
google.charts.Bar(document.getElementById('bunkers_found'));
chart2.draw(data2, options2);  
  }
</script>

<div id="log_book_discrepancy" style="width:100%; height:340px;"></div>
<div id="bunkers_found" style="width:100%; height:340px;"></div>

我的两个阵列变得像： $ log_book_discrepancy就像：

Array
(
[0] => stdClass Object
    (
        [type_of_vessel] => BULK CARRIER
        [fuel_hsfo] => 30
        [fuel_lsfo] => 40
        [fuel_mgo] => 40
    )

[1] => stdClass Object
    (
        [type_of_vessel] => OIL TANKER
        [fuel_hsfo] => 60
        [fuel_lsfo] => 40
        [fuel_mgo] => 45
    )

）

$ bunker_found数组就像：

Array
(
[0] => stdClass Object
    (
        [type_of_vessel] => BULK CARRIER
        [fuel_hsfo] => 10
        [fuel_lsfo] => 40
        [fuel_mgo] => 40
    )

[1] => stdClass Object
    (
        [type_of_vessel] => CHEMICAL TANKER
        [fuel_hsfo] => 50
        [fuel_lsfo] => 40
        [fuel_mgo] => 55
    )

）

Answer 1

这是没有PHP的解决方案，带有给定数据，第一个图表带有选项：＆＃34; isStacked：true＆＃34;：

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
        ['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
        ['BULK CARRIER', 30, 40, 40],
        ['OIL TANKER', 60, 40, 45]
    ]);
    var data2 = google.visualization.arrayToDataTable([
        ['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
        ['BULK CARRIER', 10, 40, 40],
        ['CHEMICAL TANKER', 50, 40, 55]
    ]);
  var options1 = {
  title: 'Log Book Discrepancy',
    chartArea: {width: '50%'},
    isStacked: true,
    hAxis: {
      title: 'HSFO, LSFO, and MGO',
      minValue: 0,
    },
  };
  var options2 = {
  title: 'Bunkers Found',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'HSFO, LSFO, and MGO',
      minValue: 0,
    },
  };    
  var chart1 = new google.visualization.BarChart(document.getElementById('log_book_discrepancy'));
  chart1.draw(data1, options1);
  var chart2 = new google.visualization.BarChart(document.getElementById('bunkers_found'));
  chart2.draw(data2, options2);
}

https://jsfiddle.net/mblenton/pmeh4hr9/2/

或使用MaterialChart：

https://jsfiddle.net/mblenton/gp12p37w/2/

Answer 2

试试这个：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  // Load the Visualization API and the piechart package.
  google.load('visualization', '1', {packages: ['corechart', 'bar']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
 function drawChart() {

// Create the data table.
var data1 = google.visualization.arrayToDataTable([
['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
    <?php 
       foreach ($log_book_discrepancy as $log_book)
        {
          ?>
            ["<?php echo trim($log_book->type_of_vessel); ?>", <?php echo trim($log_book->fuel_hsfo); ?>, <?php echo trim($log_book->fuel_lsfo); ?>, <?php echo trim($log_book->fuel_mgo); ?> ],
          <?php
        }
    ?>
]);
// Create the data table.
var data2 = google.visualization.arrayToDataTable([
['Metric Tonnes', 'HSFO', 'LSFO', 'MGO'],
    <?php 
    foreach ($bunker_found as $bunker)
        {
            ?>
                ["<?php echo trim($bunker->type_of_vessel); ?>", <?php echo trim($bunker->fuel_hsfo); ?>, <?php echo trim($bunker->fuel_lsfo); ?>, <?php echo trim($bunker->fuel_mgo); ?> ],
            <?php
        }
    ?>
]);

// Set chart options
var options1 = {
    chart: {
      title: 'Log Book Discrepancy',
      subtitle: 'HSFO, LSFO, and MGO',
    }
  };
// Set chart options
var options2 = {
        chart: {
          title: 'Bunkers Found',
          subtitle: 'HSFO, LSFO, and MGO',
        }
      };

// Instantiate and draw our chart, passing in some options.
var chart1 = new google.visualization.BarChart(document.getElementById('log_book_discrepancy'));
chart1.draw(data1, options1);
var chart2 = new google.visualization.BarChart(document.getElementById('bunkers_found'));
chart2.draw(data2, options2);  
  }
</script>

<div id="log_book_discrepancy" style="width:100%; height:340px;"></div>
<div id="bunkers_found" style="width:100%; height:340px;"></div>

两个谷歌条形图不在一个页面中工作

2 个答案: