Question

我正在尝试使用google api显示图表。即使我得到数组中的结果，它也不会显示在图表中。

这是我的代码

<?php
$query = "SELECT
            MONTHNAME(last_modified) as Month,
            SUM(before_order_line_items.total) AS Quotes,
            COUNT(orders.order_id) AS Qcnt
          FROM orders
          INNER JOIN before_order_line_items
          ON orders.sales_order_id = before_order_line_items.sales_order_id
          WHERE order.order_quote='Quote' AND orders.authorise = 'Yes'

          GROUP BY MONTH(orders.last_modified)
          ORDER BY YEAR(orders.last_modified)
         ";      
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_array($result)) {
  $myurl[] = "['".$row['Month']."', ".$row['Quotes'].", ".$row['Qcnt']."]";
}
?>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {
    callback: drawChart,
    packages: ['corechart']
  });

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Quotes', 'Counts'],
      <?php
        echo implode(",", $myurl);
      ?>
    ]);

    var options = {
      title: 'Orders',
      vAxis: {
        title: '',
        titleTextStyle: {
          color: 'red'
        }
      }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
<div id="chart_div" style="height: 400px;"></div>

当我检查日期时，我也会获得Qcnt的日期

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Quotes', 'Counts'],
      ['May', 23299.00, 2]    ]);

但它没有显示在图表中。只显示报价金额。

Answer 1

'Counts' 的值太小
由于图表的规模而根本不可见......

您可以将'Counts'系列分配给第二个y轴...

series: {
  1: {
    targetAxisIndex: 1
  }
},

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Quotes', 'Counts'],
    ['May', 23299.00, 2],
    ['June', 23200.00, 2]
  ]);

  var options = {
    series: {
      1: {
        targetAxisIndex: 1,
      }
    },
    title: 'Orders',
    vAxis: {
      title: '',
      titleTextStyle: {
        color: 'red'
      }
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

数据未显示在谷歌条形图中

1 个答案: