连接高图表 x 范围系列的点

Question

我正在尝试实现接近以下的效果截图。

我想避免使用Highchart的SVGRenderer，所以我正在寻找任何其他解决方案来连接我的x范围系列图表上的条形。

遵循小提琴是我到目前为止想出的：jsFiddle

Highcharts.chart('container', {
  chart: {
    type: 'xrange',
  },
  series: [{
    data: [{
      x: Date.UTC(2014, 10, 21, 7, 10),
      x2: Date.UTC(2014, 10, 21, 9, 25),
      y: 0,
      color: '#83d6e7'
    }, {
      x: Date.UTC(2014, 10, 21, 9, 25),
      x2: Date.UTC(2014, 10, 21, 10, 40),
      y: 1,
      color: '#669aab'
    }, {
      x: Date.UTC(2014, 10, 21, 10, 40),
      x2: Date.UTC(2014, 10, 21, 11, 41),
      y: 2,
      color: '#3c6677'
    }, {
      x: Date.UTC(2014, 10, 21, 11, 41),
      x2: Date.UTC(2014, 10, 21, 14, 14),
      y: 2,
      color: '#3c6677'
    }, {
      x: Date.UTC(2014, 10, 21, 14, 14),
      x2: Date.UTC(2014, 10, 21, 15, 13),
      y: 1,
      color: '#669aab'
    }]
  }]
});

Answer 1

我想出了满足我要求的解决方案。我将使用line series，并使用适当的zIndexes将其隐藏在x-range series后面。

来自问题的 jsFiddle 已相应更新。