在Google地图中显示没有值的日期

时间:2017-06-22 09:39:26

标签: javascript charts google-visualization

我已经获得了以下脚本&它工作得很好。

然而,在某些日子里可能没有订单。在这种情况下,日期仍应显示,但值应为零。

enter image description here

如上所述,它从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>

1 个答案:

答案 0 :(得分:0)

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

下面是一个使用不同数据解决问题的示例,以便更轻松地查看解决方案。需要将数组中的字符串日期转换为日期对象以满足数据类型条件。这是通过使用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>