使用flot,如何创建链接饼图,将您带到其他网页？

Question

在flot中,我如何创建一个饼图,其中每个楔形都是指向不同网页的链接？

Answer 1

我尝试过，但没能做到。我从这个例子开始，然后添加：

grid: { clickable: true },

在“pie: {”行的正上方。然后我在最后添加了一个plotclick函数：

$("#placeholder").bind("plotclick", function (event, pos, item) {
    alert('click!');
    for(var i in item){
        alert('my '+i+' = '+ item[i]);
    }
});

您会看到“点击！” 消息，但“item”没有属性。

我想你只需将 URL 添加到数据对象，然后将浏览器从plotclick 函数中转发到适当的 URL。如果你弄清楚了，我很想知道！

更新： 这里有一些可能有用的东西——它只是将标签变成链接。将 URL 放入您的数据中，如下所示：

$.plot($("#placeholder"), [
    { label: "Serie1",  data: 10, url: "http://stackoverflow.com"},
    { label: "Serie2",  data: 30, url: "http://serverfault.com"},
    { label: "Serie3",  data: 90, url: "http://superuser.com"},
    { label: "Serie4",  data: 70, url: "http://www.google.com"},
    { label: "Serie5",  data: 80, url: "http://www.oprah.com"},
    { label: "Serie6",  data: 110, url: "http://www.realultimatepower.net/"}
],

然后将 labelFormatter 设置为如下所示：

return '<a href="'+serie.url+'">'+serie.label+'</a><br/>'+Math.round(serie.percent)+'%';

不过，单击饼块本身仍然没有什么特别的作用。