如何在Highcharts中为单个数据点绘制线条或转换为线条样式？

针对单个数据点的Highcharts图表，有两种常见方案可以实现你需要的线条样式：

方案1：绘制从X轴到数据点的垂直竖线 #

通过图表加载事件触发渲染器绘制路径，可选择隐藏原数据点只保留线条：

const chart = Highcharts.chart('container', {
  yAxis: {
    min: 0,
    max: 100
  },
  xAxis: {
    categories: ['02-2024']
  },
  series: [{
    data: [20],
    pointPlacement: 'on',
    marker: { // 可选：隐藏原数据点
      enabled: false
    }
  }],
  chart: {
    events: {
      load: function() {
        const point = this.series[0].points[0];
        // 获取坐标信息
        const x = point.plotX + this.plotLeft;
        const yTop = point.plotY + this.plotTop;
        const yBottom = this.plotHeight + this.plotTop;
        
        // 绘制竖线
        this.renderer.path([
          'M', x, yBottom,
          'L', x, yTop
        ])
        .attr({
          stroke: this.series[0].color,
          strokeWidth: 2
        })
        .add();
      }
    }
  }
});

方案2：绘制水平线条（两种实现方式） #

方式A：渲染器绘制从Y轴到数据点的横线 #

const chart = Highcharts.chart('container', {
  yAxis: {
    min: 0,
    max: 100
  },
  xAxis: {
    categories: ['02-2024']
  },
  series: [{
    data: [20],
    pointPlacement: 'on',
    marker: {
      enabled: false
    }
  }],
  chart: {
    events: {
      load: function() {
        const point = this.series[0].points[0];
        const xLeft = this.plotLeft;
        const xRight = point.plotX + this.plotLeft;
        const y = point.plotY + this.plotTop;
        
        // 绘制水平线
        this.renderer.path([
          'M', xLeft, y,
          'L', xRight, y
        ])
        .attr({
          stroke: this.series[0].color,
          strokeWidth: 2
        })
        .add();
      }
    }
  }
});

方式B：添加虚拟数据点生成原生线条 #

通过添加同Y值的虚拟点，让Highcharts自动生成线条：

const chart = Highcharts.chart('container', {
  yAxis: {
    min: 0,
    max: 100
  },
  xAxis: {
    categories: ['', '02-2024'] // 空类别作为虚拟点位置
  },
  series: [{
    data: [20, 20], // 虚拟点 + 实际数据点
    pointPlacement: 'on',
    marker: {
      enabled: false // 隐藏所有标记点
    }
  }]
});

补充：贯穿整个图表的水平线 #

如果需要覆盖整个图表宽度的横线，直接使用Y轴的plotLines配置：

const chart = Highcharts.chart('container', {
  yAxis: {
    min: 0,
    max: 100,
    plotLines: [{
      value: 20, // 对应数据点的Y值
      color: '#7cb5ec', // 匹配系列默认颜色
      width: 2,
      zIndex: 1
    }]
  },
  xAxis: {
    categories: ['02-2024']
  },
  series: [{
    data: [20],
    marker: {
      enabled: true // 保留数据点标记
    }
  }]
});

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