具有 2 个 x 轴的 Highcharts 子弹图......可能吗？

Question

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

查看这个 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-axis，数字范围在底部 x-axis。我希望项目符号代表进度（在本例中为 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/

具有 2 个 x 轴的 Highcharts 子弹图......可能吗？

Highcharts Bullet Chart with 2 x axes... possible?

double

graph

bullet

highcharts