charts - 如何在谷歌图表中动态创建刻度(月)?
问题描述
给定一个聚合数据表,定义为:
aggData:[日期:日期][团队:字符串][分数:数字]
我想绘制能够按年份过滤的聚合数据。我在 hAxis 上使用动态刻度来避免重复标签问题。但是,自定义刻度的标签不会出现。我希望 hAxis 显示月份。我的预感是我没有正确创建刻度
请参阅下面的图片
var hAxisTicks = [];
var dateRange = aggData.getColumnRange(0);
for (var y = dateRange.min.getFullYear(); y <= dateRange.max.getFullYear(); y = y + 1) {
for(var m = dateRange.min.getMonth(); m <= dateRange.max.getMonth(); m = m + 1){
hAxisTicks.push(new Date(y,m));
}
}
var yearPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'categoryFilter_div',
options: {
filterColumnIndex: 0,
ui: {
allowTyping: false,
allowMultiple: false,
label: 'Year:',
labelStacking: 'vertical'
},
useFormattedValue: true
}
});
var lineChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: 900,
height: 500,
hAxis: {
format: 'MMM',
ticks: hAxisTicks
}
}
});
aggData.sort([{ column: 0 }]);
// draw chart
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind(yearPicker, lineChart);
dashboard.draw(aggData);
<div id="dashboard_div">
<div id="categoryFilter_div"></div>
<div id="chart_div"></div>
</div>
指定 hAxisTicks 值时,图表在 hAxis 上没有标签
我已经将数据记录到控制台使用
google.visualization.dataTableToCsv(aggData)
输出是:
"Oct 1, 2019",128,0,0,0
"Nov 1, 2019",152,75,0,0
"Dec 1, 2019",0,0,23,0
"Jan 1, 2020",225,0,0,84
解决方案
循环的问题for
在于月份部分。
鉴于您提供的数据,最小日期的月份 = 9(十月)
但是,最大日期的月份 = 0(一月)
所以月份for
循环不会运行,因为 9 > 0
相反,让我们使用一个while
循环。
var dateTick = dateRange.min;
while (dateTick.getTime() <= dateRange.max.getTime()) {
hAxisTicks.push(dateTick);
dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1);
}
推荐阅读
- meteor - 如何下载 Meteor Galaxy 上的所有日志
- python - 使用 subprocess.call 运行多个进程并获取它们的 pid 的 Python 脚本
- android - 未解决的参考:将 gradle 转换为 gradle.kts 时的 ext
- c++ - 反转三角形编号中的每一行
- java - 如果一个类有一个内部类并且内部类运行一个线程,那么内部类线程是否彼此共享外部类的相同字段?
- gradle - 如何从包含的构建中获取 Gradle 任务的属性?
- android - 如何在颤动中获取临时存储目录?
- reactjs - 在 React js 中导航页面的最佳方法
- google-apps-script - 将 Gmail 标签导出到 Google 表格
- html - 试图制作一个垂直截断子元素的滚动框