我试图限制折线图中显示的日期范围。
当前图表:
我想将显示的结果数限制为从今天(当前日期)到最近3个月,但是我不知道该怎么做。我已经ChartRangeFilter
在这里研究过使用此类帖子,但这需要用户进行过滤;我希望用户加载图表后立即限制结果。
我已经考虑过(不确定如何实现这些功能):
JSON:
{
"rows": [{
"c": [{
"v": "2010-10"
}, {
"v": 5
}]
}, {
"c": [{
"v": "2012-11"
}, {
"v": 43
}]
}, {
"c": [{
"v": "2016-12"
}, {
"v": 59
}]
}, {
"c": [{
"v": "2016-01"
}, {
"v": 50
}]
}, {
"c": [{
"v": "2011-02"
}, {
"v": 37
}]
}, {
"c": [{
"v": "2016-03"
}, {
"v": 38
}]
}, {
"c": [{
"v": "2016-04"
}, {
"v": 46
}]
}, {
"c": [{
"v": "2016-05"
}, {
"v": 45
}]
}, {
"c": [{
"v": "2016-06"
}, {
"v": 22
}]
}, {
"c": [{
"v": "2011-07"
}, {
"v": 10.0
}]
}, {
"c": [{
"v": "2011-08"
}, {
"v": 50
}]
}, {
"c": [{
"v": "2016-09"
}, {
"v": 7
}]
}, {
"c": [{
"v": "2016-10"
}, {
"v": 14
}]
}, {
"c": [{
"v": "2016-11"
}, {
"v": 55
}]
}],
"cols": [{
"type": "string",
"id": "SalesDate",
"label": "SaleDate"
}, {
"type": "number",
"id": "InventoryPercent",
"label": "InventoryPercent"
}]
}
所需结果:
//via Python - returns only these values to be displayed in chart
"v": "2016-09" "v": 7
"v": "2016-10" "v": 14
"v": "2016-11" "v": 55
所需图表:
我尝试了第一种方法,但它不起作用:
JavaScript:
$.get('/sales_data', function(response) {
salesData = JSON.parse(response);
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
});
function drawChart() {
//3 ticks for tick count
function formatMonth() {
var today = newDate();
var salesMonth;
for (var x = 2; x >= 0; x--) {
salesMonth = moment(new Date(today.getFullYear(), today.getMonth() - x).format("YYYY-MM");
console.log(salesMonth);
}
}
var chartOptions = {
vAxis: {
minValue: 0,
maxValue: 100,
interpolateNulls: true,
visible: true,
gridlines: { count: 5},
ticks: { //tick count - limit to last 3 months
format: function() {
return formatMonth();
}
}
如何限制显示范围只能显示最近3个月?
过滤服务器/源上的数据可能更有意义,
这将减少客户端处理的数据量
但是,Google确实提供了在绘制之前处理过滤的方法
您可以结合使用setRows
和getFilteredRows
方法来创建DataView
请参阅以下工作片段...
首先,根据json创建一个DataView,将第一列转换为实际日期
然后setRows
和getFilteredRows
用来限制最近3个月
然后将DataView中每一行的日期用于hAxis刻度
google.charts.load('current', {
callback: drawChart,
packages: ['corechart', 'table']
});
function drawChart() {
var dataTable = new google.visualization.DataTable({
"rows": [{
"c": [{
"v": "2010-10"
}, {
"v": 5
}]
}, {
"c": [{
"v": "2012-11"
}, {
"v": 43
}]
}, {
"c": [{
"v": "2016-12"
}, {
"v": 59
}]
}, {
"c": [{
"v": "2016-01"
}, {
"v": 50
}]
}, {
"c": [{
"v": "2011-02"
}, {
"v": 37
}]
}, {
"c": [{
"v": "2016-03"
}, {
"v": 38
}]
}, {
"c": [{
"v": "2016-04"
}, {
"v": 46
}]
}, {
"c": [{
"v": "2016-05"
}, {
"v": 45
}]
}, {
"c": [{
"v": "2016-06"
}, {
"v": 22
}]
}, {
"c": [{
"v": "2011-07"
}, {
"v": 10.0
}]
}, {
"c": [{
"v": "2011-08"
}, {
"v": 50
}]
}, {
"c": [{
"v": "2016-09"
}, {
"v": 7
}]
}, {
"c": [{
"v": "2016-10"
}, {
"v": 14
}]
}, {
"c": [{
"v": "2016-11"
}, {
"v": 55
}]
}],
"cols": [{
"type": "string",
"id": "SalesDate",
"label": "SaleDate"
}, {
"type": "number",
"id": "InventoryPercent",
"label": "InventoryPercent"
}]
}
);
dataTable.sort([{column: 0, desc: true}]);
var datePattern = 'yyyy-MM';
var formatDate = new google.visualization.DateFormat({pattern: datePattern});
var dataView = new google.visualization.DataView(dataTable);
dataView.setColumns([
// date column
{
calc: function (dt, row) {
var dateParts = dt.getValue(row, 0).split('-');
var dateValue = new Date(parseInt(dateParts[0]), parseInt(dateParts[1]) - 1, 1);
return {
v: dateValue,
f: formatDate.formatValue(dateValue)
}
},
type: 'date',
label: dataTable.getColumnLabel(0)
},
// inventory
1
]);
var today = new Date();
var last3Months = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());
dataView.setRows(dataView.getFilteredRows([{
column: 0,
minValue: last3Months
}]));
var hAxisTicks = [];
for (var i = 0; i < dataView.getNumberOfRows(); i++) {
hAxisTicks.push(dataView.getValue(i, 0));
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, {
hAxis: {
format: datePattern,
ticks: hAxisTicks
}
});
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(dataView);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="table_div"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句