Question

如果图表类型为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

通过改变一些事情来实现这一点......

我将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;

Answer 3

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

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)';

绘制饼图 - 外部选择切片

3 个答案: