Google 图表、HighCharts 或 ChartJS 双轴甘特图和折线图可视化

Question

我正在尝试创建一个双轴甘特图和折线图，以在左轴（甘特图数据）上显示任务，在右轴（折线图数据）上显示数值。我想使用 Google Charts、HighCharts 或 chartJs 进行可视化，但不知道哪一个可以解决这个问题，请参阅问题所附的 link/picture 以获得我试图接近的视觉效果到。我可以单独显示每个图表，但不能作为组合的双轴图表一起显示。我尝试了各种组合图表配置，但没有任何效果。对此的任何帮助将不胜感激。

这里是 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

Answer 1

可以使用 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

Google 图表、HighCharts 或 ChartJS 双轴甘特图和折线图可视化

Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization

highcharts

chart.js

gantt-chart

google-visualization