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

Question

我正在尝试创建一个双轴甘特图和折线图，以在左轴上显示任务（甘特图数据），在右轴上显示数值（折线图数据）。我想使用谷歌图表、高图或chartJs进行可视化，但不知道哪一个可以实现，请参阅我试图接近的视觉对象的问题所附的链接/图片。我可以单独显示每个图表，但不能作为组合的双轴图表一起显示。我已经尝试了各种组合图表配置，但没有任何东西接近工作。对此的任何帮助都将不胜感激。

以下是谷歌图表、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可以轻松创建这种类型的图表。您可以将直线和xrange系列类型与两个轴一起使用：

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