如何让Highcharts图例仅作用于其所属的图表？

我来帮你搞定这个问题！你现在遇到的核心问题是自定义的全局图例把不同图表里的同名系列绑定在一起了，点击时会同时操作所有图表的对应系列，所以才会出现互相影响的情况。下面给你两种解决方案，按需选择：

方案1：用Highcharts内置的独立图例（推荐） #

这是最简单省心的方式，直接让每个图表启用自己的内置图例，天然就只会控制自身的系列，不会干扰其他图表。

只需要在每个图表的配置里加上（或者确认已经存在）这段配置：

legend: {
    enabled: true // 开启当前图表的内置图例
}

这样每个图表的图例完全独立，点击各自图例只会切换自己图表里的系列，完美解决跨图表干扰的问题。

方案2：修复自定义全局图例的关联逻辑 #

如果你必须保留自己做的全局图例，那就要修改set_legend函数的逻辑，给每个图例项加上图表标识，区分不同图表的同名系列。修改后的代码如下：

function set_legend() {
    const legend = $('#legend');
    legend.html('');
    let listed = {};

    // 遍历每个图表，加上图表索引做区分
    $.each(Highcharts.charts, function(chartIndex, chrt) {
        $.each(chrt.series, function(j, serie) {
            // 生成唯一的key：图表索引+处理后的系列名称
            const tmp_key = `chart-${chartIndex}-${serie.name.replace(/[\s,-]/g, '')}`;
            if (!listed[tmp_key]) {
                // 给图例项加上图表索引的data属性，方便后续定位
                legend.append(`<div class="item ${tmp_key}" data-chart-index="${chartIndex}">
                    <div class="symbol" style="background-color:${serie.color}"></div>
                    <div class="serieName">${serie.name}</div>
                </div>`);
                // 保存对应图表和系列的信息
                listed[tmp_key] = { chartIndex, serie };
            }
        });
    });

    // 绑定点击事件时，只操作对应图表的目标系列
    Object.keys(listed).forEach(key => {
        $('#legend .'+key).click(function() {
            const { chartIndex, serie } = listed[key];
            const targetChart = Highcharts.charts[chartIndex];
            // 找到当前图表里对应的系列
            const targetSerie = targetChart.series.find(s => s.name === serie.name);
            if (targetSerie) {
                targetSerie.setVisible(!targetSerie.visible);
            }
        });
    });
}

关键修改点： #

• 给每个图例项生成唯一标识，把图表索引加进去，避免不同图表的同名系列被归为一组
• 点击图例时，只定位到对应图表的目标系列进行可见性切换，不再跨图表操作所有同名系列

小建议 #

如果你的两个图表是独立展示的，优先选方案1，Highcharts的内置图例已经做了完善的交互处理，不用自己维护复杂的关联逻辑，还能减少自定义代码的潜在bug。

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