Flot饼图 - 外部选择切片

Question

我发现this solution。

如果图表的类型是pie，如何指定高亮（x，y）的参数（x，y）？

谢谢

对不起，我的英语不好。

Answer 1

不幸的是，flot并没有向用户展示饼图突出显示代码。因此，我们非常不走运了，但你在页面上的适当位置合成单击事件什么可能工作：

$("#highligher").click(function() { 
    var e = jQuery.Event('click'); 
    e.pageX = 250; //add a made up x/y coordinate to the click event 
    e.pageY = 250; 
    $('#plot canvas:first').trigger(e); //trigger the click event on the canvas 
}); 

这是在行动：http://jsfiddle.net/ryleyb/mHJm5/

问题是你必须知道您想突出显示的切片的位置。如果图形是静态的，这将很容易设置。如果它是一个动态图，你必须挖掘馅饼代码的来源以找出如何计算饼图片的位置。在这种情况下，可能更容易拥有所有饼图函数的副本并手动绘制饼图覆盖图。

Answer 2

我们在图表之外保持选择状态（作为骨干模型）。当发生选择事件（点击）时，我们在模型中设置选定的切片。选择更改后，我们使用所选饼图切片的选择颜色刷新图表。

var data = []; 
var color = slice.index == selected ? '#FF0000' : '#0000FF'; 
data.push({label:slice.Label,data:slice.Value,color:color}); 

上面的代码片段对所有未选择的片使用蓝色，对于选定的片使用蓝色。你的颜色逻辑会更复杂。

注意：您也可以使用rgba CSS作为颜色，这可以带来非常好的效果。例如：

var color = slice.index == selected ? 'rgba(0,0,255,1)' : 'rgba(0,0,255,0.5)'; 

Answer 3

通过改变一些事情刚刚得到这个工作...

我jquery.flot.pie.js改变highlight和unhighlight到pieHighlight和pieUnhighlight。

然后，在jquery.flot.pie.js这两条线后...

plot.hooks.processOptions.push(function(plot, options) { 
      if (options.series.pie.show) { 

我说...

   plot.highlight = pieHighlight; 
       plot.unhighlight = pieUnhighlight;