如何实现柱状图上方线条替代圆点？技术实现咨询

用户代码 #

mychart.addSeries
(
    { 
        type: 'line', name: '{!selectedTypevalue}', lineWidth: 0,  data: bdataYTD4, stack : 0, pointPlacement: 0, showInLegend: true, tickColor: '#FF0000',tickWidth: 3, marker: { symbol: 'line', fillColor: '#F58F00' }, states: { hover: { enabled: false }, }
    }
)

需求与问题 #

• 需要在柱状图上方显示横向线条替代默认的圆点标记
• 已设置type: 'line'但未达到预期效果，增大lineWidth后呈现的样式不符合要求
• 期望实现类似示例图中的线条样式

解决方案 #

从代码中的addSeries方法判断使用的是Highcharts，可通过自定义标记符号实现需求：

1. 替换marker的symbol为自定义SVG路径 #

将原配置中的marker部分替换为自定义SVG路径，直接绘制横向线条：

marker: {
  symbol: function() {
    // 调整数值可改变线条长度和粗细，-5/5控制长度，-1/1控制粗细
    return 'M -5 -1 L 5 -1 L 5 1 L -5 1 Z';
  },
  lineWidth: 1,
  fillColor: '#F58F00',
  lineColor: '#F58F00'
}

2. 清理无效配置 #

移除tickColor、tickWidth这类不属于line系列的无效属性，保持lineWidth: 0隐藏折线本身，只显示标记线条。

最终配置 #

mychart.addSeries({ 
  type: 'line', 
  name: '{!selectedTypevalue}', 
  lineWidth: 0,  
  data: bdataYTD4, 
  stack: 0, 
  pointPlacement: 0, 
  showInLegend: true, 
  marker: {
    symbol: function() {
      return 'M -5 -1 L 5 -1 L 5 1 L -5 1 Z';
    },
    lineWidth: 1,
    fillColor: '#F58F00',
    lineColor: '#F58F00'
  }, 
  states: { 
    hover: { enabled: false }
  }
})

内容的提问来源于stack exchange，提问作者Carine D'Mello