highcharts - 在 Highcharts 中禁用图例悬停

Question

我需要禁用图例项的悬停属性，因为我在移动平台上使用 Highcharts。遗憾的是，制作 legendItemClick 事件并不能解决问题，因为悬停仍然会发生。

看到这个问题早在 2011 年就出现在 highcharts 的旧支持网站上，我很受鼓舞。可以找到该线程 here .我特别高兴看到最后一个 jfiddle 示例和其中声明的函数。

不幸的是，唯一对我有用的方法是将 setHoverStyle 更改为 null。这不是很好，因为悬停 Action 仍然会触发并使导航图例和图表无响应。上述线程中的其余建议导致图表未呈现。

当然，这可能是因为我很难将示例转化为我的目的 - 老实说，我不知道在哪里调用该函数，而且我尝试过的所有地方都失败了。我的 JavaScript 文件是按照以下行设置的

var chartDefinition = {
  chart: {
    renderTo: 'chart_content',
    type: 'column'
  },
  colors: [
         '#619ED6',
         '#6BA547',
         '#F7D027',
         '#E48F1B',
         '#B77EA3',
         '#E64345',
         '#60CEED',
         '#9CF168',
         '#F7EA4A',
         '#FBC543',
         '#FFC9ED',
         '#E6696E'
         ],
  title: {
    text: ''
  },

  ...

 column: {
      shadow: false,
      borderWidth: 1,
      events: {
        click: function() { return false; },
        legendItemClick: function() { return false; }
      },
      dataLabels: {
        enabled: false,
        color: '#222',
        style: {
          fontFamily: 'sans-serif',
          fontSize: '13px',
          fontWeight: 'bold'
        }
      }
    }
  },
  series: []
}; 

列出和设置各种 highcharts 属性。

有谁知道如何禁用此悬停属性或调用 function 的正确位置？ ？

Answer 1

有几种解决方案可以实现这一点。没有内置选项可以更改它(截至 06.2022)。

1. 尝试禁用 legendGroup 的鼠标悬停，而不是 legendItem。

演示:http://jsfiddle.net/Cp7xh/10/

1. 在 CSS 中禁用指针事件:

.highcharts-legend {
    pointer-events: none;
} 

演示:http://jsfiddle.net/BlackLabel/ebrodhk4/

1. 阻止 Highcharts Core 添加事件的插件:

插件:

(function(H) {
    H.wrap(
        H.Legend.prototype,
        'init',
        function(proceed, chart, options) {
            
            if (options.enableMouseTracking === false) {
                this.setItemEvents = false;
            }
            
            proceed.apply(this, [chart, options]);
        }
    );
})(Highcharts);

用法:

    legend: {
        enableMouseTracking: false,
        itemStyle: {
            cursor: 'auto'
        }
    },

演示:https://jsfiddle.net/BlackLabel/ogqv2sya/