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

Question

我正在尝试创建双轴甘特图和折线图，以在左轴上显示任务（甘特图数据），在右轴上显示数值（折线图数据）。我想使用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

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