Как добавить дополнительную строку к метке линии сетки условно на основе предыдущей метки, когда видимые линии сетки пропускаются из-за максимального числа линий сетки - PullRequest
Новая
       36

Как добавить дополнительную строку к метке линии сетки условно на основе предыдущей метки, когда видимые линии сетки пропускаются из-за максимального числа линий сетки

0 голосов
/ 30 октября 2019

Я работаю с Vue chart.js, и у моих меток линий сетки есть время суток и, возможно, день недели. Количество элементов данных для диаграммы изменяется в зависимости от общей продолжительности времени (например, иногда диаграмма может охватывать 6 часов, иногда она может охватывать 72 часа и т. Д.). То, что я пытаюсь сделать, это показать день недели в метке для первой метки линии сетки нового дня (например: точки данных могут быть ср. 9 вечера, 10 вечера, 11 вечера, чт 12:00, 1:00, 2:00 и т. Д.),

Приведенное ниже изображение должно помочь визуализировать все это.

Я пытался использовать обратный вызов в chartjs для линий сетки и сравнивать день в index-1 с днем ​​в index иесли они разные, добавьте день к линии сетки. Это работает, если вы не пропустите ни одного часа в возвращенном массиве линии сетки, но мне нужно иметь возможность пропустить часы, так как максимальное количество тиков составляет около 6. Число часов, которые нужно пропустить, не легко вычислить, так как потенциальныйсроки меняются так сильно. Таким образом, если возвращение будет стоить 50 часов данных, каждый тик будет где-то с интервалом около 9 часов.

Каждая точка данных, отправленная на диаграмму, отформатирована следующим образом: 

{
   hourTime: hour.localTime,
   dayAbbrev: daysOfWeekAbbrev[dayOfWeekAbbrev],
}

Examples:

{
   hourTime: 11PM,
   dayAbbrev: 1,
},
{
   hourTime: 12AM,
   dayAbbrev: 2,
}

ticks: {
   fontColor: '#878787',
   fontSize: 12,
   fontFamily: 'Solis',
   padding: 20,
   maxTicksLimit: 9,
   maxRotation: 0,
   callback: (label, index, labels) => {
    if (index !== 0 && labels[index].dayAbbrev === labels[index-1].dayAbbrev) {
       return [[], [label.hourTime]];
    }
    return [[label.dayAbbrev], [label.hourTime]];
   },
},

Мой реальный результат от вышеупомянутого обратного вызова выглядит следующим образом ... https://i.gyazo.com/ea5e9456dd86e34a2492ee59e10e8f32.png

Что мне нужно сделать, так это показать Thu над меткой 2 утра, так как это первая метка нового дня. Есть ли способ использовать только видимые метки линии сетки в обратном вызове? Любая помощь?

...