Highcharts堆叠条形图特定区域添加虚线高亮实现问题

你当前直接为系列配置border的方式会默认包裹整个数据点对应的完整条形区域，无法自定义起始位置，可通过Highcharts内置的SVGRenderer在图表加载完成后手动绘制指定位置的虚线高亮框，完整可运行代码如下：

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    events: {
      load: function () {
        const chart = this
        const yAxis = chart.yAxis[0]
        // 自定义高亮的y轴区间
        const highlightStartY = 20
        const highlightEndY = 50
        // 对应x轴的分类索引，这里只有Jan一个分类，所以是0
        const targetXIndex = 0
        
        // 数值转像素坐标（条形图轴默认反转，注意坐标对应关系）
        const barWidth = chart.series[0].points[0].pointWidth
        const xPixel = chart.xAxis[0].toPixels(targetXIndex) - barWidth / 2
        const yStartPixel = yAxis.toPixels(highlightStartY)
        const yEndPixel = yAxis.toPixels(highlightEndY)

        // 绘制虚线高亮框
        chart.renderer.rect(
          Math.min(yStartPixel, yEndPixel),
          xPixel,
          Math.abs(yEndPixel - yStartPixel),
          barWidth,
          0
        ).attr({
          stroke: 'red',
          'stroke-width': 3,
          'stroke-dasharray': '3,3', // 虚线样式
          fill: 'transparent',
          zIndex: 9999
        }).add()
      }
    }
  },
  xAxis: {
    categories: ['Jan'],
    visible: false
  },
  yAxis: {
    min: 0,
    visible: false
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    },
    dataLabels: {
      enabled: false
    }
  },
  series: [{
    name: 'John',
    data: [{ y: 15 }]
  }, {
    name: 'Jane',
    data: [{ y: 22 }]
  }, {
    name: 'Joe',
    data: [{ x: 0, y: 44 }]
  }]
})

可调整配置说明 #

• 调整highlightStartY、highlightEndY两个变量的值，即可自定义高亮的y轴数值区间
• 修改stroke-dasharray的参数可调整虚线样式，格式为「实线长度,间隔长度」，例如5,3代表5像素实线加3像素空白
• 如果需要高亮某一个完整的堆叠块，可直接读取对应系列点的shapeArgs属性获取坐标参数，无需手动计算区间：例如要高亮Jane对应的堆叠块，直接取chart.series[1].points[0].shapeArgs中的x、y、width、height作为绘制矩形的参数即可
• 原代码中给Joe系列配置的borderWidth、borderColor、zIndex参数可以删除，不再需要

内容的提问来源于stack exchange，提问作者user1117714