带有 2 x 轴的 Highcharts 子弹图……可能吗？

Question

我想在 2 x 轴子弹图上绘制进度与时间线。

请参阅此 JSFiddle 了解我目前拥有的内容：http://jsfiddle.net/ejhnnbk0/

Highcharts.chart('container3', {
xAxis: [{
        type: 'linear',
},{
        type: 'datetime',
        opposite: true
    }],
yAxis: {
    plotBands: [{
        from: 0,
        to: 14,
        color: '#f00'
    }, {
        from: 14,
        to: 20,
        color: '#ff0'
    }, {
        from: 20,
        to: 29,
        color: '#0f0'
    }],
    labels: {
        format: '{value}'
    },
    title: null
},
series: [{
    data: [{
        y: 16,
        target: 21
    }]
}],
tooltip: {
    pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});

我想要实现的是这样的，其中日期范围在顶部 x 轴上，而数字范围在底部 x 轴上。我希望项目符号代表进度（在这种情况下，24 个中有 16 个），并且我希望目标行指示日期范围内的当前日期（在这种情况下，在 2018 年 2 月 12 日之前的某个地方） .

任何想法都将不胜感激。

Answer 1

是的，有可能。

首先注意到你的图表是inverted，所以你需要添加另一个y轴（不是x）。

将有 2 个系列：第一个显示列（与第一个 y 轴关联），第二个显示目标（与第二个 y 轴关联）。在这种情况下，grouping 必须被禁用（否则列和目标将无法正确对齐）。

由于第一个系列不需要显示目标，因此可以将其类型更改为column：

  series: [{
    type: 'column',
    data: [{
      y: 16,
    }]
  }, {
    yAxis: 1,
    data: [{
      target: Date.UTC(2018, 0, 7)
    }]
  }]

现场演示： http://jsfiddle.net/BlackLabel/e847jztb/