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

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

问题的

jsFiddle已相应更新。

Highcharts x-range系列的连接点

1 个答案: