duanjing4667
duanjing4667
2013-03-08 08:22
浏览 107

在HighCharts中的饼图图例上单击显示工具提示并选择饼图切片

hi friends i want to show tooltip with legend on mousehover and click event of pie chart as same as when we hover pie slices and i want to show the pie selected (pie slice slide out like on pie point select )

this is default chart where i have disabled legend click for pie

  http://jsfiddle.net/LQS48/1/

can any one tell me how to do it

somthing like this as you see here

http://livecoding.io/3433043 ( which is done with custom buttons i want to achive this with highcharts legends 

any help will be appreciated .. :)

Update - Soltuion I founf with the help of steve and sebastian integrated here below in fiddle

http://jsfiddle.net/8T7Ew/1/

Final Update - Fixed a bug in this Soltuion I found with the help of steve and sebastian and highcharts support team integrated here below in fiddle and working flawlessly now .

well i hope this becomes a highcharts feature though ,

  Final working Solution for me :: http://jsfiddle.net/8T7Ew/3/

图片转代码服务由CSDN问答提供 功能建议

朋友们,我想用鼠标悬停上的图例显示工具提示,单击饼图的事件,就像我们悬停饼图时一样 切片,我想显示选择的饼图(饼图切片滑出就像饼点选择)

这是默认图表,我已禁用图例饼干 \ n

  http://jsfiddle.net/LQS48/1/
nn

可以任何人告诉我该怎么做 \ n

你看到这样的东西

  http://livecoding.io/3433043(用自定义按钮完成我希望用highcharts实现这一点 legends 
   
 
 

任何帮助将不胜感激.. :)

更新 - Soltuion我在...的帮助下获得了帮助 steve和sebastian在下面的小提琴中整合了

  http://jsfiddle.net/8T7Ew/1/
   
  
 

最终更新 - 修复了这个Soltuion中的一个错误,我在steve和sebastian的帮助下找到了这个错误,并在这里集成了highcharts支持团队 现在完美无瑕地工作。

我希望这成为一个高级功能,但

 最终工作解决方案 对我来说:: http://jsfiddle.net/8T7Ew/3/
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongxian0320
    dongxian0320 2013-03-08 09:37
    已采纳

    For click event on the legend, you can add:

       this.select();
       chart.tooltip.refresh(this);
    

    to your legendItemClick function. http://jsfiddle.net/8T7Ew/.

    For mouseover, there was a discussion on the highcharts forum http://highslide.com/forum/viewtopic.php?f=9&t=7094. The second page suggested this: http://jsfiddle.net/hfrntt/ArmRM/11661/

    点赞 评论
  • dre26973
    dre26973 2013-03-08 10:06

    Take look at example which introduced how display tooltip when you hover on legend http://jsfiddle.net/ArmRM/14892/

    $('.highcharts-legend span, .highcharts-legend tspan').each(function(index, element) {
    $(element).hover(function() {
        chart.tooltip.refresh(chart.series[0].data[index]);
    },function() {
        chart.tooltip.hide();
    })
    

    });

    点赞 评论

相关推荐