Highcharts自定义图例问题：隐藏默认符号与避免重复显示

针对你遇到的两个自定义图例问题，直接给出可行的解决方法：

问题1：隐藏默认图例符号（原symbolWidth=0无效） #

根本原因是每个数据series都会生成独立的图例项，全局symbolWidth设置无法覆盖所有项。最彻底的解决方式是让所有数据series不显示在图例中，然后单独创建一个“占位”项来承载自定义图例：

给每个数据series添加showInLegend: false：

series: [{
    name: 'Year 1990',
    data: [631, 727, 3202, 721],
    showInLegend: false // 阻止该series生成图例项
}, {
    name: 'Year 2000',
    data: [814, 841, 3714, 726],
    showInLegend: false
}, {
    name: 'Year 2018',
    data: [1276, 1007, 4561, 746],
    showInLegend: false
}]

问题2：自定义图例重复显示（formatter执行多次） #

默认情况下，每个series都会触发一次labelFormatter，所以会重复生成自定义内容。解决办法是添加一个无数据的占位series，仅让它显示在图例中，这样formatter只会执行一次：

在series数组末尾添加一个空的占位项：

{
    name: '', // 空名称避免多余文字
    data: [], // 空数据不渲染图形
    showInLegend: true // 仅让这个项显示在图例
}

完整优化后的配置 #

调整legend的样式，确保自定义图例显示正常，同时隐藏占位项的默认符号：

legend: {
    useHTML: true,
    enabled: true,
    symbolWidth: 0, // 隐藏占位项的默认符号
    itemStyle: {
        paddingLeft: '0' // 清除符号占位的空白
    },
    labelFormatter: function () {
        let innerText = '<p>';
        const theLegend = [{Color:'#F0F0F0', Label: 'legend1'},{Color:'#FFF000', Label: 'legend2'}];
        theLegend.forEach((item, index) => {
            // 调整间距让图例更美观
            innerText += `<span style="font-size:22px; color:${item.Color}; margin-right:8px;">■</span><span style="font-size:14px; color:gray; margin-right:16px;">${item.Label}</span>`;
        });
        innerText += '</p>';
        return innerText;
    }
}

完整JS代码示例 #

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region',
        align: 'left'
    },
    subtitle: {
        text: 'Source: <a href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population" target="_blank">Wikipedia.org</a>',
        align: 'left'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe'],
        title: {
            text: null
        },
        gridLineWidth: 1,
        lineWidth: 0
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        },
        gridLineWidth: 0
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            borderRadius: '50%',
            dataLabels: {
                enabled: true
            },
            groupPadding: 0.1
        }
    },
    legend: {
        useHTML: true,
        enabled:true,
        symbolWidth: 0,
        itemStyle: {
            paddingLeft: '0'
        },
        labelFormatter: function () {
            let innerText='<p>';
            const theLegend=[{Color:'#F0F0F0', Label: 'legend1'},{Color:'#FFF000', Label: 'legend2'}];
            theLegend.forEach((item, index)=>{
                innerText += `<span style="font-size:22px; color:${item.Color}; margin-right:8px;">■</span><span style="font-size:14px; color:gray; margin-right:16px;">${item.Label}</span>` ;
            })
            innerText += '</p>';
            return innerText;
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1990',
        data: [631, 727, 3202, 721],
        showInLegend: false
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 726],
        showInLegend: false
    }, {
        name: 'Year 2018',
        data: [1276, 1007, 4561, 746],
        showInLegend: false
    }, {
        name: '',
        data: [],
        showInLegend: true
    }]
});

内容的提问来源于stack exchange，提问作者edwin.koh