如何在谷歌图表中动态创建刻度（月）？答案

【问题标题】：How to dynamically create ticks (month) in google chart?如何在谷歌图表中动态创建刻度（月）？
【发布时间】：2020-01-07 17:08:04
【问题描述】：

给定一个聚合数据表，定义为：

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 上没有标签

如果不指定 hAxisTicks，图表如下所示：

我已经将数据记录到控制台使用

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

【问题讨论】：

你能分享一个数据样本吗？您确定用于绘制图表的数据表中的第一列是日期吗？
我已使用 google.visualization.dataTableToCsv(aggData) 将数据记录到控制台，输出为："Oct 1, 2019",128,0,0,0 "Nov 1, 2019", 152,75,0,0 "2019 年 12 月 1 日",0,0,23,0 "2020 年 1 月 1 日",225,0,0,84
不确定，结果是什么 --> console.log(aggData.getColumnType(0)); -- 另外，请查看hAxisTicks.length
嗯，console.log(aggData.getColumnType(0)) --> 'date' console.log(hAxisTicks.length); --> 0（令人惊讶）console.log(dateRange.min.getFullYear()); --> 2019 控制台.log(dateRange.min.getMonth()); --> 9 console.log(dateRange.max.getFullYear()); --> 2020 控制台.log(dateRange.max.getMonth()); --> 0 我认为我需要将日期范围从 dateRange.min.getMonth() 到任何给定年份 y 的某个最大值，这是我无法弄清楚的。我知道这两个 for 循环是错误的
所以内部 for 循环不会执行（duh），因为范围内的最大月份是 2020 年 1 月（因此最大月份值为 0），范围内的最小月份是 2019 年 10 月（所以最小值为 9)。而且由于最小值大于最大值，它甚至不会运行 for(var m = dateRange.min.getMonth(); m

标签： charts google-visualization

【解决方案1】：

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

【讨论】：

是的，确实解决了这个问题，所以我将其标记为已解决并发布另一个问题，即如何在按年份过滤时重新计算 hAxisTicks