如何增大Highcharts折线图的图例及图例符号尺寸？已尝试symbolHeight等属性但无效

一、为什么symbolHeight/symbolWidth/symbolRadius不生效？ #

折线图默认的图例符号是线类型（symbol: 'line'），这类符号不会响应symbolHeight、symbolWidth和symbolRadius属性。要让这些属性生效，你需要先把图例符号改成可调整尺寸的形状，比如圆形（circle）或矩形（rectangle）。

二、调整图例符号尺寸的解决方案 #

修改你的配置，在legend对象中添加symbol属性指定形状，再设置尺寸参数即可：

Highcharts.chart('container', { 
    chart: { type: 'line' }, 
    title: { text: 'Round legend symbols' }, 
    xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr'] }, 
    legend: { 
        symbol: 'circle', // 指定符号为圆形
        symbolHeight: 12, 
        symbolWidth: 12, 
        symbolRadius: 6,
        symbolPadding: 10 // 可选：增大符号与文字的间距
    }, 
    series: [{ data: [1, 3, 2, 4] }, { data: [6, 4, 5, 3] }, { data: [2, 7, 6, 5] }] 
});

如果偏好矩形符号，只需要把symbol改成'rectangle'，symbolRadius可以按需设置圆角大小。

三、增大图例整体尺寸的方法 #

要放大整个图例区域和内容，需要调整以下几个关键属性：

• 文字大小：通过legend.itemStyle.fontSize设置图例文字的字号
• 图例项高度：legend.itemHeight控制每个图例项的垂直高度
• 内边距：legend.padding调整图例容器的内边距
• 符号与文字间距：legend.symbolPadding增加符号和文字之间的距离
• 图例项宽度：legend.itemWidth（可选）固定每个图例项的宽度，避免内容拥挤

示例配置：

Highcharts.chart('container', { 
    chart: { type: 'line' }, 
    title: { text: 'Larger Overall Legend' }, 
    xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr'] }, 
    legend: { 
        symbol: 'circle',
        symbolHeight: 16, 
        symbolWidth: 16, 
        symbolRadius: 8,
        symbolPadding: 12,
        itemHeight: 30, // 增大每个图例项的高度
        padding: 15, // 图例容器内边距
        itemStyle: {
            fontSize: '14px' // 放大文字
        }
    }, 
    series: [{ data: [1, 3, 2, 4] }, { data: [6, 4, 5, 3] }, { data: [2, 7, 6, 5] }] 
});

补充说明 #

如果想保留折线图默认的线+标记样式的图例符号，而不是改成纯圆形/矩形，可以通过自定义图例符号的方式实现（利用legend.labelFormatter结合SVG），但这种方式相对复杂。如果只是单纯想放大符号，前面的方案已经能满足大部分需求。

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