javascript - Google Chart 显示空图

Question

我有一个图表，我从 MySQL 表中获取值。我能够获取值但无法在条形图中显示它。图表返回空图，如下图所示。

如您所见，控制台中显示了值，但未显示图表。

alerts.php

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

      var chart;
      var data;
      var options;

      function drawChart() {
        dataTable = google.visualization.arrayToDataTable([
          ['Floor', 'Sales', 'Expenses'],
          ['Floor 1',  1000,      400],
          ['Floor 2',  1170,      460],
          ['Floor 3',  660,       1120],
          ['Floor 4',  1030,      540]
        ]);

        options = {
          title: 'Company Performance for 1 month',
          hAxis: {title: 'Floor', titleTextStyle: {color: 'red'}}
        };
        chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(dataTable, options);
      }

      // function to update the chart with new data.
      function updateChart() {

          dataTable = new google.visualization.DataTable();

            var newData = [['Floors','CO2(1)', 'CO2(2)', 'CO2(3)'],

              <?php 
              $connect = mysqli_connect("localhost", "root", "", "test2");  
              $sql = "SELECT total AS sum_sales FROM expense WHERE asset_type = 'carbon-dioxide' AND floor = 'floor2'";
              $result = mysqli_query($connect, $sql);  

                $sales_query = $conn->query($sql);
                $sales_row = $sales_query->fetch_assoc();

                //expense
                $sql = "SELECT expenses AS sum_expenses FROM expense WHERE asset_type = 'carbon-dioxide' AND floor = 'floor2'";
                $expense_query = $conn->query($sql);
                $expense_row = $expense_query->fetch_assoc();
               $profit = $sales_row['sum_sales'] - $expense_row['sum_expenses'];
                //displaying the needed data
                echo '['.$sales_row['sum_sales'].', '.$expense_row['sum_expenses'].', '.$profit.'],';

                ?>
           ];

          var numRows = newData.length;
          var numCols = newData[0].length;

          // in this case the first column is of type 'string'.
          dataTable.addColumn('string', newData[0][i]);
        options = {
          title: 'Gas Performance',
          hAxis: {title: 'Floors', titleTextStyle: {color: 'red'}}
        };

          for (var i = 1; i < numCols; i++)
            dataTable.addColumn('number', newData[0][i]);           

          // now add the rows.
           for (var i = 0; i < numRows.length; i++) 
              dataTable.addRow(i, Number(newData[i]));  
        console.log(newData);          

          // redraw the chart.
          chart.draw(dataTable, options);    

          // console.log(dataTable);    
      }
    <label>Select period</label> <select name="vbitratecontrol0" id="combo1">;
      <option value="24h">1 Day</option>
      <option value="1w">1 Week</option>
      <option value="1m">1 Month</option>
      <option value="3m">3 Month</option>
      <option value="6m">6 Month</option>
      <option value="1y">1 Year</option>
      <option value="2y">2 Year</option>
      <option value="all">All</option>

  </select>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
    $(document).on('change', 'select', function() {
    console.log($(this).val()); // the selected options’s value
var aaa =$(this).val();
    // if you want to do stuff based on the OPTION element:
    var opt = $(this).find('option:selected')[0];
  console.log(opt);
    // use switch or if/else etc.
  if(aaa === "3m"){
  updateChart();
  }
});

图表未显示条形图，但值是从数据库中获取的，您可以在控制台中看到这些值。帮我解决问题。

谢谢!!

Answer 1

addRow 只接受数组

dataTable.addRow(newData[i]);

或者空行没有参数

dataTable.addRow();

然而，newData只有三个元素，dataTable有四列

确保它们的数量匹配...