使用flot，如何创建链接的饼图，将您带到其他网页? [英] With flot, how can I create a linked pie chart that takes you to other web pages?

问题描述

在 flot 中，如何创建一个饼形图，其中每个楔形都指向一个不同的网页?

In flot, how can I create a pie chart where each wedge is a link to a different web-page?

推荐答案

我给了它一个机会，但我做不到.我从此示例开始，然后添加:

I gave it a shot, but I wasn't able to do it. I started with this example, then added:

grid: { clickable: true },

"pie:{"行的正上方.然后我在最后添加了plotclick函数:

right above the "pie: {" line. Then I added a plotclick function at the end:

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

您将看到点击！"消息，但"item"没有属性.

You'll see the "click!" message, but "item" has no properties.

我想您只是将URL添加到数据对象中，然后将浏览器从plotclick函数中转发到相应的URL.如果您知道了，我很想知道！

I was thinking you'd just add URLs to the data ojects, then forward the browser to the appropriate URL from within the plotclick function. If you figure it out, I'd be interested to know!

更新:这可能会起作用-它将标签变成链接.像这样将URL放入您的数据中:

Update: Here's something that might work -- it just turns the labels into links. Put the URLs in your data like this:

$.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设置为类似的内容:

Then set the labelFormatter to something like:

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

不过，点击饼形本身并没有什么特别之处.

Clicking in the pie wedges themselves still does nothing special, though.

这篇关于使用flot，如何创建链接的饼图，将您带到其他网页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！