Highcharts中折线图图例无法显示虚线符号问题求助

问题原因 #

你设置的legend.symbolWidth: 10尺寸过小，导致shortdash样式的虚线无法在有限空间内渲染出短划效果，最终显示为实心块。另外，series中的customLineLegendSymbol: true属于无效自定义属性，会干扰默认图例符号的渲染逻辑。

解决方案 #

方案1：调整图例符号宽度

增大legend.symbolWidth的值，给虚线足够的渲染空间：

legend: {
  itemDistance: 50,
  itemMarginTop: 12,
  itemStyle: {
    color: '#2C3241',
    fontSize: '14px',
    fontWeight: 'normal',
    'line-height': '16px',
    "textOverflow": 'none',
    "margin-right": '50px'
  },
  symbolWidth: 25, // 增大宽度，让虚线样式正常显示
  symbolHeight: 10                              
},

方案2：移除无效自定义属性

删除series中的customLineLegendSymbol: true，让Highcharts默认根据dashStyle渲染图例符号：

{
  type: 'line',
  dashStyle: 'shortdash',
  name: 'Quantum Score',
  yAxis: 1,
  data: [],
  // 移除customLineLegendSymbol: true
  marker: {
    enabled: false,
    color: '#FF9D36',
    states: {
                hover: {
                    enabled: true
                }
            },
     lineWidth: 15
  },
  lineWidth: 5
}

方案3：自定义HTML图例符号（兜底方案）

如果前两种方法无效，通过HTML自定义图例符号，强制渲染虚线样式：

legend: {
  // 保留原有配置
  useHTML: true, // 开启HTML支持
  labelFormatter: function() {
    const dashStyle = this.dashStyle === 'shortdash' ? 'border-style: dashed;' : '';
    return `<span style="display:inline-block; width:25px; height:2px; ${dashStyle} background-color:${this.color}; margin-right:8px;"></span>${this.name}`;
  }
}

验证效果 #

调整后，折线图的图例符号会正确显示shortdash样式的虚线，与图表中的折线样式保持一致。

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