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

【问题标题】：Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart VisualizationGoogle Charts、HighCharts 或 ChartJS 双轴甘特图和折线图可视化
【发布时间】：2020-02-28 16:35:34
【问题描述】：

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

【问题讨论】：

标签： highcharts chart.js gantt-chart google-visualization

【解决方案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

【讨论】：

正是我想要的！谢谢！由于类似甘特图的日期范围显示，神奇之处在于 xrange 图表类型。我现在正在深入研究 xrange 配置选项。