双饼图场景下Highcharts图例对齐问题及自定义图例咨询

首先要明确：Highcharts默认的图例是全局统一控制的，没办法直接为单个系列设置独立的图例位置，但我们可以通过两种实用方案来实现你想要的效果：

方案一：禁用默认图例，自定义HTML独立图例 #

这种方式灵活性最高，你可以完全控制每个图例的位置和样式，步骤如下：

1. 在页面中添加两个自定义图例的HTML元素，放在图表容器的指定位置；
2. 在图表配置中禁用默认图例（将series.showInLegend设为false）；
3. 给自定义图例添加交互逻辑（如果需要点击切换系列显示）。

完整代码示例 #

<!-- 图表容器，设置相对定位方便自定义图例定位 -->
<div id="container1" style="position: relative; width: 200px; height: 150px;"></div>
<!-- 自定义的两个图例 -->
<div id="legend-aug" style="position: absolute; top: 0; left: 25px; font-size: 12px; color: #666; cursor: pointer;">Aug</div>
<div id="legend-sep" style="position: absolute; top: 0; left: 85px; font-size: 12px; color: #666; cursor: pointer;">Sep</div>

const chart = Highcharts.chart('container1', { 
    chart: { type: 'pie' }, 
    credits: { enabled: false }, 
    exporting: { buttons: { contextButton: { enabled: false } } }, 
    title: { text: '' }, 
    subtitle: { text: '' }, 
    plotOptions: { 
        series: { 
            allowPointSelect: false, 
            cursor: 'pointer', 
            dataLabels: { 
                inside: true, 
                formatter: function() { return (this.y); }, 
                color:'white', 
                distance: -30 
            }, 
            showInLegend: false // 禁用默认图例
        } 
    }, 
    series: [{ 
        colorByPoint: true, 
        data: [{ name: 'Aug', y: 74 }], // 注意：name要加引号，否则会报错
        center: [40, 60], // 调整y值，给图例留出空间
        size: 50,
        id: 'series-aug' // 给系列加ID，方便后续交互
    }, { 
        colorByPoint: true, 
        data: [{ name: 'Sep', y: 94 }],
        center: [100, 60],
        size: 50,
        id: 'series-sep'
    }] 
});

// 给自定义图例添加点击切换系列显示的逻辑
document.getElementById('legend-aug').addEventListener('click', function() {
    const series = chart.get('series-aug');
    series.setVisible(!series.visible);
});

document.getElementById('legend-sep').addEventListener('click', function() {
    const series = chart.get('series-sep');
    series.setVisible(!series.visible);
});

方案二：拆分两个独立的图表实例 #

把每个饼图做成单独的Highcharts图表，这样每个图表都有自己的图例，可以独立调整位置，适合布局比较规整的场景。

完整代码示例 #

<!-- 用flex布局让两个图表并排 -->
<div style="display: flex; gap: 20px; align-items: flex-start;">
    <div id="chart-aug" style="width: 100px; height: 150px;"></div>
    <div id="chart-sep" style="width: 100px; height: 150px;"></div>
</div>

// 第一个饼图（Aug）
Highcharts.chart('chart-aug', { 
    chart: { type: 'pie' }, 
    credits: { enabled: false }, 
    exporting: { buttons: { contextButton: { enabled: false } } }, 
    title: { text: '' }, 
    subtitle: { text: '' }, 
    plotOptions: { 
        series: { 
            allowPointSelect: false, 
            cursor: 'pointer', 
            dataLabels: { 
                inside: true, 
                formatter: function() { return (this.y); }, 
                color:'white', 
                distance: -30 
            }, 
            showInLegend: true
        } 
    }, 
    legend: {
        align: 'center',
        verticalAlign: 'top',
        y: 0, // 独立调整这个图表的图例y位置
        itemStyle: {
            fontSize:'12px',
            color: '#666666',
            fontWeight: 'normal',
        },
        symbolHeight: .001,
        symbolWidth: .001,
        symbolRadius: .001
    },
    series: [{ 
        colorByPoint: true, 
        data: [{ name: 'Aug', y: 74 }],
        center: [50, 70],
        size: 50,
    }] 
});

// 第二个饼图（Sep）
Highcharts.chart('chart-sep', { 
    chart: { type: 'pie' }, 
    credits: { enabled: false }, 
    exporting: { buttons: { contextButton: { enabled: false } } }, 
    title: { text: '' }, 
    subtitle: { text: '' }, 
    plotOptions: { 
        series: { 
            allowPointSelect: false, 
            cursor: 'pointer', 
            dataLabels: { 
                inside: true, 
                formatter: function() { return (this.y); }, 
                color:'white', 
                distance: -30 
            }, 
            showInLegend: true
        } 
    }, 
    legend: {
        align: 'center',
        verticalAlign: 'top',
        y: 0, // 独立调整这个图表的图例y位置
        itemStyle: {
            fontSize:'12px',
            color: '#666666',
            fontWeight: 'normal',
        },
        symbolHeight: .001,
        symbolWidth: .001,
        symbolRadius: .001
    },
    series: [{ 
        colorByPoint: true, 
        data: [{ name: 'Sep', y: 94 }],
        center: [50, 70],
        size: 50,
    }] 
});

额外提示 #

你原来的代码里有个小问题：data中的name: Aug应该写成name: 'Aug'，否则会被当作变量解析，导致报错，记得修正这个语法问题。

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