【问题标题】:Disable legend hover in Highcharts在 Highcharts 中禁用图例悬停
【发布时间】:2013-07-08 20:39:49
【问题描述】:

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

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

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

当然,这可能是因为我很难将示例转化为我的目的 - 老实说,我不知道在哪里调用该函数,而且我尝试过的所有地方都失败了。我的 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 的正确位置?

【问题讨论】:

  • 顺便说一句,如果您将 dataLabels 设置为 false,为什么还要对其进行样式设置?

标签: highcharts


【解决方案1】:

您的示例:http://jsfiddle.net/Cp7xh/10/

尝试禁用 legendGroup 的鼠标悬停,而不是 legendItem

【讨论】:

  • 感谢帕维尔的回答。这确实摆脱了将鼠标悬停在它们上时变得粗体的传说项目。不过,似乎悬停事件仍在触发。光标在 jsfiddle 示例中的图例项上切换,在移动设备上,图例仍然无响应。有什么办法可以完全摆脱悬停?谢谢!
  • 我刚刚在 SG3 上进行了测试,运行良好。由于 CSS 样式,指针出现..
  • 谢谢帕维尔!重新评估后,您的建议非常成功。
猜你喜欢
  • 2013-04-20
  • 1970-01-01
  • 1970-01-01
  • 2013-06-17
  • 1970-01-01
  • 2014-02-15
  • 1970-01-01
  • 2020-10-07
  • 1970-01-01
相关资源
最近更新 更多