ChartJS - рисовать график с меткой по месяцам, данные по дням

Я бы хотел нарисовать линейный график Chartjs с данными по дням, но с меткой по месяцам.

Если ярлык отображается днем, тогда есть много очков. Итак, я бы хотел отображать ярлык по месяцам, а не днем. Например:

Кто-то может научить меня, как это сделать?

Спасибо.

Ответ 1

Просто настройте свой ресурс xAxes-> time:
единица: "месяц"

xAxes: [{
  type: 'time',
  position: 'bottom',
  time: {
    displayFormats: {'day': 'MM/YY'},
    tooltipFormat: 'DD/MM/YY',
    unit: 'month',
   }
}],

Ответ 2

Массив labels массив data должны совпадать. Поэтому вам нужно будет вычислить ваши значения для хранения в массиве данных в соответствии с вашими метками

data: {
    labels: ["Jan", "Feb", "March", ...],
    datasets: [{
        label: '# of Votes',
        data: [01, 02, 03, ...],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            ...
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            ...
        ],
        borderWidth: 1
    }]
},

Это решает ваши сомнения?

Ответ 3

Этот вопрос довольно старый, но я нашел обходное решение, используя функцию afterTickToLabelConversion. Я отформатировал дату и оставил только один ярлык за каждый месяц (остальные ярлыки преобразуются в пустые кавычки).
Вот фрагмент, который можно добавить в свой график:

scales: {
        xAxes: [{
            type: 'time',
            position: 'bottom',
            time: {
                displayFormats: {
                    'day': 'MM/YY'
                },
                tooltipFormat: 'DD/MM/YY',
                unit: 'day',
            },
            // leave only one label per month
            afterTickToLabelConversion: function (data) {
                var xLabels = data.ticks;
                var oldLabel = "";
                xLabels.forEach(function (labels, i) {
                    if(xLabels[i] == oldLabel){
                        xLabels[i] = "";
                    } else {
                        oldLabel = xLabels[i];
                    }
                });
            }
        }]
    }