如何在谷歌图表中显示所有月份

Question

我正在使用 Google 图表创建月度销售图表。即使销售不存在，我也想在图表中显示所有月份。例如，如果 2 月份没有销售，那么它应该显示 0 的值

基本上，月份仍应显示，但值应为零。

这是我目前取得的成就

invoice_order 表

order_id | order_date | order_total_amount
1        | 2021-01-01 | 1000
2        | 2021-03-01 | 2000

上表将返回 1 月和 3 月的销售额并在图表中显示这些月份，但我还想在图表中显示值为 0 的 2 月。基本上，无论销售情况如何，所有月份都需要显示在图表中。我希望你有一个想法！

      <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Monthly', 'Sales'],
          <?php 
          $select_sale = "select date_format(order_date,'%M'), sum(order_total_amount) from invoice_order group by year(order_date),month(order_date) order by year(order_date),month(order_date)";
          $select_sale_query = mysqli_query($connection,$select_sale);
          while($sale_result = mysqli_fetch_assoc($select_sale_query)) { ?>
          ['<?php echo $sale_result["date_format(order_date,'%M')"] ?>','<?php echo $sale_result["sum(order_total_amount)"] ?>'],
        <?php } ?>
        ]);

        var options = {
          chart: {}
        };

        var chart = new google.charts.Bar(document.getElementById('chart_div'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
     </script>

Answer 1

致谢：answer to: Display item in legend even if value = 0 with Google Charts Tools Pie Chart

---

您必须添加February - 您可能不会收到数据的其他月份 - 默认使用0 值，然后，使用此属性修改您的图表设置：

sliceVisibilityThreshold:0

这是一个 jsfiddle sample 修改后显示 TOSCA 和 0 值。

代码：

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
  'packages': ['corechart'],
  'callback': render
});

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

  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2],
    ['TOSCA', 0] // This is the "February" in your case.
  ]);

  // Set chart options
  var options = {
    'title': 'How Much Pizza I Ate Last Night',
    'width': 400,
    'height': 300,
    'sliceVisibilityThreshold': 0 // show 0 values in the graph.
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(
    document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<h2>
  Google Pie Chart - sample with 0 value:
</h2>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>