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个），我希望目标行指示日期范围内的当前日期（在这种情况下，在02之前的某个地方）二千零十八分之十二）。

任何想法都会受到赞赏。

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个轴的Highcharts子弹图...可能吗？

1 个答案: