如何在Highcharts中的列范围图表的某些列上绘制水平线

Question

我正在使用Highcharts中的列范围图，我在同一图中绘制不同的测量值和置信区间：

组内的前几列（例如Januar）代表不同城市的测量值，而最后一列代表置信区间。我想在代表数据均值的置信区间添加水平线。也就是说，每个橙色列将在橙色矩形的左侧到右侧的特定高度处获得其自己的线。我如何绘制这样的线？

我知道如何将行添加为单独的line类型系列。但是，这样做，我不确定如何猜测橙色列的确切位置，也不知道如何处理通过图例隐藏某些列的情况。

这个问题与this question有关，但我无法在我的案例中找到任何解决方案。

这是小提琴：https://jsfiddle.net/nikicc/rqxqm4hm/

Answer 1

您可以使用renderer.path绘制正确的线条。

function drawDataMeans() {
  const intervalSeries = this.get('conf-interval'),
        series = this.series.filter(series => intervalSeries !== series)

  let lines = this.dataMeansLines

  if (!lines) {
    lines = this.dataMeansLines = series[0].data.map(series => this.renderer.path().attr({
      'stroke-width': 2,
      stroke: 'black'
    }).add(intervalSeries.group))
  }

  const visibleSeries = series.filter(series => series.visible)

  if (intervalSeries.visible && visibleSeries.length) {
    intervalSeries.data.forEach((point, i) => {
      const mean = visibleSeries.reduce((sum, series) => sum + series.data[i].high, 0) / visibleSeries.length
      const {x, width} = point.shapeArgs
      const y = this.yAxis[0].toPixels(mean, true)

      lines[i].attr({
        d: `M ${x} ${y} L ${x + width} ${y}`,
        visibility: 'visible'
      })
    })
  } else {
    lines.forEach(line => line.attr({visibility: 'hidden'}))
  }
}

挂载/重绘事件

chart: {
  type: 'columnrange',
  inverted: false,
  events: {
    load: drawDataMeans,
    redraw: drawDataMeans
  }
},

示例：https://jsfiddle.net/dq48sq3w/