如何基于Month对Json数据进行分组，并使用谷歌图表绘制它

Question

我使用谷歌图表插件绘制区域图表，通过使用JSON数据显示如下代码，其中包含值和图表的日期应根据月份打印。

链接显示在图像中输入图像描述

如何使用谷歌图表绘制基于月份的图表

是否可以使用谷歌图表buit功能，并需要为该achive编写一些自定义的JavaScript？

 <script type="text/javascript"> google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Date', 'value'], [ "1/Jan/2017", 28 ], [ "5/Feb/2019", 174 ], [ "8/Mar/2017", 150 ], [ "2/Apr/2019", 174 ], [ "18/May/2019", 100 ], [ "22/Jun/2019", 5 ], [ "30/Jul/2019", 178 ], [ "28/Aug/2019", 59 ], [ "1/Sep/2019", 87 ], [ "10/Oct/2019", 50 ], [ "15/Nov/2019", 123 ], [ "20/Dec/2019", 108 ] ]); var options = { title: 'Company Performance', hAxis: { title: 'Date', titleTextStyle: { color: '#333' } }, curveType: 'function', legend: { position: 'bottom' }, pointSize: 5, dataOpacity: 0.5, vAxis: { minValue: 0 } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> 

 <div id="chart_div" style="width: 100%; height: 500px;"></div> 

Answer 1

为了将x轴格式化为日期，
需要将数据表中的第一列从字符串转换为实际日期...

我们可以使用带有计算列的数据视图来转换日期...

var view = new google.visualization.DataView(data);
view.setColumns([{
  type: 'date',
  label: 'Date',
  calc: function (dt, row) {
    return new Date(dt.getValue(row, 0));
  }
}, 1]);

此外，由于数据不按日期排序，我们可以将视图转换回数据表并对其进行排序......

data = view.toDataTable();
data.sort([{column: 0}]);

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

 google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Date', 'value'], [ "1/Jan/2017", 28 ], [ "5/Feb/2019", 174 ], [ "8/Mar/2017", 150 ], [ "2/Apr/2019", 174 ], [ "18/May/2019", 100 ], [ "22/Jun/2019", 5 ], [ "30/Jul/2019", 178 ], [ "28/Aug/2019", 59 ], [ "1/Sep/2019", 87 ], [ "10/Oct/2019", 50 ], [ "15/Nov/2019", 123 ], [ "20/Dec/2019", 108 ] ]); var view = new google.visualization.DataView(data); view.setColumns([{ type: 'date', label: 'Date', calc: function (dt, row) { return new Date(dt.getValue(row, 0)); } }, 1]); data = view.toDataTable(); data.sort([{column: 0}]); var options = { chartArea: {bottom: 56}, title: 'Company Performance', hAxis: {format: 'MMM', title: 'Date', titleTextStyle: {color: '#333'} }, curveType: 'function', legend: { position: 'bottom'}, pointSize: 5, dataOpacity: 0.5, vAxis: {minValue: 0} }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } 

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