highcharts legend图例禁止点击事件以及鼠标移入样式保持不变

原创于 2020-12-22 11:32:37 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

highcharts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Highcharts自定义图例的行为，包括禁用图例点击事件及保持鼠标悬停时图例样式的不变。通过JavaScript代码实现图例项的定制化交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

highcharts legend图例禁止点击事件以及鼠标移入样式保持不变

直接上代码

let each = highcharts.each;
   // todo 自定义图例事件
   highcharts.wrap(highcharts.Legend.prototype, "renderItem", function(
     proceed,
     item
   ) {
     proceed.call(this, item);

     var series = this.chart.series,
       element = item.legendGroup.element;
	 // todo 图例鼠标移入事件
     element.onmouseover = function() {
       each(series, function(seriesItem) {
         if (seriesItem !== item) {
           each(["group", "markerGroup"], function(group) {
             // todo 鼠标移入图例不改变颜色样式
             seriesItem[group].attr("opacity", 1);
             seriesItem[group].attr("color", "#e1e1e1");
           });
         }
       });
     };
     // todo 图例点击事件
     element.onclick = function() {
       return false;
     };
   });