Как динамически создавать тики (месяц) в Google Chart? - PullRequest
Новая
       2

Как динамически создавать тики (месяц) в Google Chart?

2 голосов
/ 07 января 2020

С учетом таблицы агрегированных данных, которая определяется как:

aggData: [Дата: дата] [Команда: строка] [Балл: число]

Я хочу построить агрегированные данные с возможностью фильтрации по годам. Я использую динамические отметки c на оси 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 enter image description here

Без указания hAxisTicks диаграмма выглядит следующим образом: enter image description here

я записал данные на консоль, используя 

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

1 Ответ

0 голосов
/ 07 января 2020

проблема с for l oop связана с месяцем.

с учетом предоставленных вами данных, месяц для минимальной даты = 9 (октябрь)
однако месяц для максимальной даты = 0 (январь)

, поэтому месяц for l oop не запускается, потому что вместо 9> 0

давайте использовать while l oop. 

var dateTick = dateRange.min;
while (dateTick.getTime() <= dateRange.max.getTime()) {
    hAxisTicks.push(dateTick);
    dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1);
}
...