Angular中Highcharts点击列添加边框高亮及唯一标识实现问询

针对你的需求，无需使用allowPointSelect（默认选中样式不符合要求），可以直接操作Highcharts生成的SVG元素，给点击的列添加自定义边框高亮，同时确保每次仅高亮当前点击的列。

实现步骤： #

1. 为每个图表设置唯一标识
   创建图表时，给每个图表的chart配置添加唯一id，用于区分不同图表的选中状态：

   // 示例：创建第一个顶部图表
   this.chart1 = new Chart({
     chart: {
       type: 'column',
       id: 'chart-top-1' // 自定义唯一ID
     },
     // 其他原有配置项...
   });
   
   // 另外3个图表分别设置id：chart-top-2、chart-top-3、chart-top-4
   

2. 全局记录当前选中的点
   在组件类中声明一个对象，存储每个图表当前选中的点：

   private currentSelectedPoints: {[key: string]: Highcharts.Point} = {};
   

3. 修改点击事件逻辑，控制高亮样式
   在plotOptions.series.events.click中添加样式控制代码，先清除当前图表之前选中点的高亮，再给当前点击的列添加边框：

   plotOptions: {
     series: {
       events: {
         click: function(event) {
           const chart = this.chart;
           const clickedPoint = event.point;
           const chartId = chart.options.chart.id;
           const self = this;
   
           // 清除当前图表之前选中点的高亮
           if (self.currentSelectedPoints[chartId]) {
             self.currentSelectedPoints[chartId].graphic.attr({
               stroke: null,
               'stroke-width': 0
             });
           }
   
           // 给当前点击的列添加高亮边框
           clickedPoint.graphic.attr({
             stroke: '#2196F3', // 自定义边框颜色，例：蓝色
             'stroke-width': 3, // 边框宽度
             strokeDasharray: 'none' // 实线边框，虚线可设为'5,3'
           });
   
           // 更新当前选中点记录
           self.currentSelectedPoints[chartId] = clickedPoint;
   
           // 原有绘制组件图的逻辑
           self.drawComponentChart(clickedPoint.name);
         }
       }
     },
     // 其他原有plotOptions配置...
   }
   

说明： #

• 该方案直接操作SVG元素，完全自定义高亮样式，避免allowPointSelect的默认灰色选中效果
• 通过图表ID区分不同图表的选中状态，保证4个独立图表的高亮互不干扰
• 可根据需求调整stroke（边框颜色）、stroke-width（边框宽度）等样式属性

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