连接的Highcharts X端系列点

Question

我想实现接近以下screenshot效果。

我想避免使用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

我想出了解决方案，satifies我的要求。我将使用一个line series和简单地使用适当的x-range series后面躲起来，zIndexes。

从的jsfiddle问题已随之更新。