Диаграмма. js визуализация изменений во времени с цветами - PullRequest
Новая
       80

Диаграмма. js визуализация изменений во времени с цветами

0 голосов
/ 28 апреля 2020

Я пытаюсь создать визуальное представление статуса объекта с течением времени, и я создал нечто, похожее на это:

https://i.stack.imgur.com/j0vQ6.png

Однако это было сделано с помощью обычной вертикальной гистограммы, использующей все 1 в качестве данных гистограммы, и изменения цвета гистограммы на основе данных о моем состоянии. Было бы более разумно использовать горизонтальную столбчатую диаграмму с накоплением, однако на стандартной диаграмме. js реализация принимает массивы в качестве входных данных, но данные предназначены только для одного сегмента в нескольких строках (см. Горизонтальная столбчатая диаграмма с диаграммой. js и строки 72, 76 и 80 в сопровождающей ссылке на принятый ответ).

Если бы я хотел, чтобы в каждой строке было много сегментов (при каждом изменении состояния, которое может быть много раз), есть ли лучший способ добиться этого? Другие библиотеки приемлемы, но решение для диаграммы. js предпочтительнее.

РЕДАКТИРОВАТЬ: Вот фрагмент кода, который поможет сделать вещи немного понятнее. 

var dataForChart = {
    datasets: [{
      data: dummyData,
      backgroundColor:colours,
      borderWidth: 0,
      xAxisId: "data"
    }],
    labels: chartLabels
};
var chart = new Chart(document.getElementById("statusChart"+count), {
    type: 'bar',
    data: dataForChart,
    options: statusChartOptions(count)
});

Где dummyData - это массив единиц (поэтому столбцы появляются на графике на фиксированной высоте), colours - это массив цветов столбцов, указывающих состояние. Оба они представляют собой длину количества периодов времени (сегментов), которые я буду sh записывать в день. count используется для l oop через код и для создания одного графика в день данных. В идеале я мог бы иметь только один график, и я мог бы изменить метки оси Y на день недели.

...