Google Charts, HighCharts или ChartJS Визуализация двухосевой диаграммы Ганта и линейной диаграммы - PullRequest
Новая
       70

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

0 голосов
/ 02 ноября 2019

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

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

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

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

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

enter image description here

1 Ответ

1 голос
/ 03 ноября 2019

Этот тип диаграммы может быть легко создан с использованием 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

...