显示Google图表中没有值的日期 [英] Showing dates where there are no values in Google Charts

问题描述

我有下面的脚本&它是完美的。

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

像上面那样，它从06-19跳到06-21。

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

预先感谢您

头部脚本 $ b

 <脚本type =text / javascriptsrc =https://www.google.com/jsapi>< / script> 
< script type =text / javascript> 
 google.load（visualization，1，{packages：[corechart]}）; 
 google.setOnLoadCallback（drawChart）; 
函数drawChart（）{
 var data = google.visualization.arrayToDataTable（[
 
 ['Date'，'Total Orders']，
 ['2017- 9-6' ，200]，[ '2017年8月6日'，1500]，[ '2017年7月7日'，800]，[ '2017年7月3日'，1800]，['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> 
  

Body Script

 < h3>柱形图< / h3> 
< div id =columnchartstyle =width：900px; height：500px;>< / div> 
  

解决方案

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

下面是一个示例，它将不同的数据用于解决问题，以便于查看解决方案。数组中的字符串日期需要转换为日期对象以符合数据类型标准。这是通过使用 new Date（）对象实现的。

 < ; script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script> 
< script> 
 google.charts.load（'current'，{packages：['corechart'，'bar']}）; 
 google.charts.setOnLoadCallback（drawChart）; 
 
函数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> 
  

I've got the below script & it's working perfectly.

However, it may be the case that on some days there are no orders. In this case, the date should still show, but the value should be zero.

Like in the above, it jumps from 06-19 to 06-21.

Is there a way to still show 06-20 and just have the value as zero? The missing date doesn't exist in the database as a record is only created when an expense is submitted, so I'm a bit lost.

Thank you in advance

Head 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);
 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>

Body Script

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

解决方案

To address this issue you would need to define that your axes are continuous. This can be achieved by defining the data type for your chart columns.

Below is an example that uses different data to your problem to make it easier to see the solution. The string dates in the array need to be converted to a date object to meet the data type criteria. This is achieved by using the new Date() object.

<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>

这篇关于显示Google图表中没有值的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！