График с накоплением в столбце «Time Line» с использованием Ng2-Charts / ChartJs

Question

Я хочу создать следующую диаграмму, используя Ng2-Charts (угловые 2 директивы для ChartJ).

Однако у меня возникли проблемы с логикой набора данных. Я исследовал, чтобы найти аналогичную диаграмму (используя ng2-диаграммы), но безрезультатно.

Вот некоторая информация о графике: Каждая компания и 3 этапа (обозначены красными, желтыми и зелеными цветами), значение обозначает, сколько дней компания провела на данном этапе.

например: Компания 1 провела 27 дней на этапе 1 (зеленый), 54 дня на этапе 2 (желтый) и 2 дня на этапе 3 (зеленый).

Как можно достичь этого графика, используя ng2-диаграммы?

Answer 1

Хороший вопрос, но кажется, что он еще не поддерживается ChartJS. Взгляните на этот выпуск и более интересный этот запрос-запрос .

Так как это открытый запрос функций для многих людей, существуют также варианты, позволяющие решить его путем добавления пользовательских функций, таких как здесь , но вы не найдете решения, использующего ng2-charts напрямую.

В вашем случае я бы предложил попробовать использовать эти вилки и использовать Chart.js напрямую (без углового компонента) или искать другую библиотеку, способную отображать эти типы диаграмм.

Хакерское решение, которое могло бы работать, также добавляет white padding для каждого столбца с накоплением, как это предлагается здесь: https://github.com/chartjs/Chart.js/issues/2912#issuecomment-230468691

A создали рабочий стек стека , используя это «решение»: