Диаграммы Google, HighCharts или ChartJS Двухосная диаграмма Ганта и визуализация линейных диаграмм

Я пытаюсь создать диаграмму Ганта с двумя осями и линейную диаграмму для отображения задач на левой оси (данные диаграммы Ганта) и числовых значений на правой оси (данные линейной диаграммы). Я хочу использовать Google Charts, HighCharts или chartJs для визуализации и не знаю, какой из них может это сделать, см. Ссылку / изображение, прикрепленное к вопросу о визуальном элементе, к которому я пытаюсь приблизиться. Я могу отображать каждую диаграмму отдельно, но не вместе, как комбинированную диаграмму с двумя осями. Я пробовал всевозможные конфигурации комбинированной диаграммы, но ничего не приближалось к работе. Любая помощь по этому поводу будет оценена.

Вот ссылки на демонстрации диаграмм Google, комбинированных диаграмм HighCharts и диаграмм Ганта:

https://developers.google.com/chart/interactive/docs/gallery/ganttchart

https://www.highcharts.com/demo/combo-multi-axes

https://www.highcharts.com/gantt/demo

введите здесь описание изображения


chart.js google-visualization highcharts gantt-chart
person thenextmogul    schedule 02.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Такой тип диаграммы можно легко создать с помощью Highcharts. Вы можете использовать типы серий line и xrange с двумя yAxis:

Highcharts.chart('container', {
    xAxis: {
        type: 'datetime'
    },
    yAxis: [{
        categories: [...],
    }, {
        opposite: true
    }],
    series: [{
        type: 'xrange',
        data: [...]
        }
    }, {
        type: 'line',
        yAxis: 1,
        data: [...]
    }]
});

Интерактивная демонстрация: https://jsfiddle.net/BlackLabel/zv74tsoq/

Справочник по API: https://api.highcharts.com/highcharts/yAxis < / а>

person ppotaczek    schedule 02.11.2019
comment
Именно то, что я искал! Спасибо! Магия заключается в типе диаграммы xrange из-за отображения диапазона дат, подобного диаграмме Ганта. Сейчас я углубляюсь в параметры конфигурации xrange. - person thenextmogul; 04.11.2019