显示 Google 图表中没有值的日期

Question

我有下面的脚本，它运行良好。

但是，有时可能会出现没有订单的情况。在这种情况下，日期仍应显示，但值应为零。

和上面一样，它从 06-19 跳到 06-21。

有没有办法仍然显示 06-20 并将值设为零？数据库中不存在缺失的日期，因为只有在提交费用时才会创建记录，所以我有点迷茫。

提前谢谢你

头部脚本

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
 var data = google.visualization.arrayToDataTable([

 ['Date', 'Total Orders'],
 ['2017-9-6',200],['2017-8-6',1500],['2017-7-7',800],['2017-7-3',1,800],['2017-7-2',200],['2017-6-13',10000],['2017-10-5',800],['2017-10-12',4,500],['',], 
 ]);

 var options = {
 title: 'Orders Per Day'
 };
 var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
 chart.draw(data, options);
 }
 </script>

正文

<h3>Column Chart</h3>
 <div id="columnchart" style="width: 900px; height: 500px;"></div>

Answer 1

要解决此问题，您需要定义轴是连续的。这可以通过定义图表列的数据类型来实现。

以下示例使用不同的数据来解决您的问题，以便更轻松地查看解决方案。需要将数组中的字符串日期转换为日期对象以满足数据类型标准。这是通过使用new Date() 对象来实现的。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Total Orders');

  data.addRows([
     [new Date('2017-9-6'),200],
     [new Date('2017-7-7'),800],
     [new Date('2017-7-3'),800],
     [new Date('2017-7-2'),200],
     [new Date('2017-6-13'),300]
 ]);

 var options = {
     title: 'Orders Per Day'
 };

 var chart = new 
   google.visualization.ColumnChart(document.getElementById('columnchart'));
 chart.draw(data, options);
}
</script>