在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/

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

这是默认图表，我已禁用图例饼干 p> \ n

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

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

你看到这样的东西 p>

  http://livecoding.io/3433043（用自定义按钮完成我希望用highcharts实现这一点 legends 
  code>  pre> 
 
 任何帮助将不胜感激.. :)  p> 
 
 
 更新 -  Soltuion我在...的帮助下获得了帮助 steve和sebastian在下面的小提琴中整合了 strong>  p> 
 
 
  http://jsfiddle.net/8T7Ew/1/
  code>  pre> 
  
  最终更新 - 修复了这个Soltuion中的一个错误，我在steve和sebastian的帮助下找到了这个错误，并在这里集成了highcharts支持团队 现在完美无瑕地工作。 strong>  p> 
 
 
我希望这成为一个高级功能，但 p> 
 
 

 最终工作解决方案 对我来说:: http：//jsfiddle.net/8T7Ew/3/
 
  div>

答

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/

答

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();
})

});

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

相关推荐