Диаграмма JS: все значения отображаются на оси х после преобразования обратного вызова - PullRequest
Новая
       34

Диаграмма JS: все значения отображаются на оси х после преобразования обратного вызова

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

Я хочу использовать диаграмму. Js, чтобы построить некоторые данные по дням. Дни будут проходить с 169 дня (неделя 24 дня 1) до 295 дня (неделя 42 дня 1).

Я хочу, чтобы все данные отображались за все дни, но только подмножество дней на оси х, как показано ниже. Я хочу, чтобы дни на оси х отображались как неделя И только для первого числа каждой недели. Например, день 169 будет отображаться как неделя 24, тогда на оси x не будет значений до дня 176, который является неделей 25. Я хочу, чтобы каждую неделю отображалось таким образом на оси х.

Мне удалось преобразовать дни в недели на оси X с помощью этой функции обратного вызова: 

ticks: {
//stepSize: 10, //This does nothing
callback: function(dataLabel, index) {
//Hide the label of the datasets except the beginning of the week. Display the 
week, not the day. Return null to hide the grid line, or '' to keep it.
return (dataLabel - 1) % 7 === 0 ? (Math.floor((dataLabel - 1) / 7)).toString() : null;
},

Это действительно , кажется, работает в те дни, которые я хочу для преобразования в недели преобразуются в недели, а остальные возвращаются как нулевые (без значения по оси X и без строки). Я могу сказать это путем изменения размера диаграммы вручную и из журнала консоли, который я использовал. Однако диаграмма Js, похоже, выбирает, сколько из этих конвертированных недель отображать. Я пытался использовать значение stepSize безрезультатно. Есть ли способ заставить Chart. JS добавить все эти преобразованные недели по оси x?

Пожалуйста, посмотрите демонстрацию этого JsFiddle: https://jsfiddle.net/Brett_Riverboat/6hkqb1yj/5/ Строка 215 - это функция обратного вызова.

1 Ответ

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

Я исправил это, отключив функцию autoSkip. Что-то, что я пробовал ранее, но не смог добраться до работы. Предположительно, потому что я поставил его не в том месте. 

      xAxes: 
        [{
            ticks: 
            {
                callback: function(dataLabel, index) {
                    //Hide the label of the datasets except the beginning of the week. Display the week, not the day. Return null to hide the grid line, or '' to keep it.
                    console.log("dataLabel = " + dataLabel + " (dataLabel - 1) % 7 " + (dataLabel - 1) % 7)
                    return (dataLabel - 1) % 7 === 0 ? (Math.floor((dataLabel - 1) / 7)).toString() : null;
                },
                fontSize: 16,
                autoSkip: false,
            },
            scaleLabel: {
                display: true,
                labelString: 'Week'
            }
        }]
...