Highcharts饼图图例设置及外部元素悬停高亮饼图方法咨询

Highcharts饼图默认会根据数据系列的name自动生成图例，以下是常见的自定义配置方式：

• 启用/关闭图例：通过legend.enabled控制，设为true启用，false关闭
• 调整位置与布局：
  • 用legend.align（left/right/center）、legend.verticalAlign（top/middle/bottom）设置整体位置
  • legend.layout设为horizontal或vertical控制图例项排列方向
  • 用legend.x/legend.y进行像素级微调
• 自定义样式：
  • legend.itemStyle设置图例项的字体、颜色等基础样式
  • legend.itemHoverStyle配置悬停时的样式
• 隐藏特定图例项：在对应数据点或系列中添加showInLegend: false

示例配置代码：

Highcharts.chart('container', {
    chart: { type: 'pie' },
    legend: {
        enabled: true,
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        itemStyle: { fontSize: '14px', color: '#2c3e50' },
        itemHoverStyle: { color: '#e74c3c' }
    },
    series: [{
        name: '品类销量',
        data: [
            ['智能手机', 45],
            ['平板电脑', 25],
            ['笔记本电脑', 20],
            ['智能穿戴', 10]
        ]
    }]
});

利用Highcharts的highlight() API方法，结合DOM事件监听即可实现：

实现步骤： #

1. 保存图表实例：初始化饼图时将实例存入变量，方便后续调用
2. 给外部元素绑定事件：为自定义元素添加mouseenter和mouseleave事件，触发对应饼图数据点的高亮/取消高亮
3. 匹配数据点：通过自定义元素的属性（如data-index）或文本内容，找到对应的饼图数据点

代码示例： #

HTML（自定义外部元素）：

<div class="custom-legend-group">
    <span class="custom-legend-item" data-index="0">智能手机</span>
    <span class="custom-legend-item" data-index="1">平板电脑</span>
    <span class="custom-legend-item" data-index="2">笔记本电脑</span>
    <span class="custom-legend-item" data-index="3">智能穿戴</span>
</div>

JavaScript：

// 初始化饼图并保存实例
const pieChart = Highcharts.chart('container', {
    chart: { type: 'pie' },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            states: {
                hover: { brightness: 0.15 } // 自定义高亮亮度，和图例悬停保持一致
            }
        }
    },
    series: [{
        name: '销量',
        data: [['智能手机',45],['平板电脑',25],['笔记本电脑',20],['智能穿戴',10]]
    }]
});

// 绑定外部元素的悬停事件
document.querySelectorAll('.custom-legend-item').forEach(item => {
    // 鼠标进入：高亮对应数据点
    item.addEventListener('mouseenter', function() {
        const pointIndex = parseInt(this.dataset.index);
        pieChart.series[0].data[pointIndex].highlight(true);
    });

    // 鼠标离开：取消高亮
    item.addEventListener('mouseleave', function() {
        const pointIndex = parseInt(this.dataset.index);
        pieChart.series[0].data[pointIndex].highlight(false);
    });
});

补充说明： #

如果不想用索引匹配，也可以通过数据点的name来查找：

// 鼠标进入事件示例（按name匹配）
item.addEventListener('mouseenter', function() {
    const targetName = this.textContent.trim();
    const targetPoint = pieChart.series[0].data.find(point => point.name === targetName);
    if (targetPoint) targetPoint.highlight(true);
});

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