Question

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

Answer 1

我试了一下，但我无法做到。我从this example开始，然后添加：

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

然而，点击饼形楔子本身并没有什么特别之处。

Answer 2

我知道这是一个老线程，但我发现了另一种方法。

确保grid设置为clickable

var data = [{
  "label" : "series1",
  "data"  : 24,
  "url"   : "http://stackoverflow.com"
},
{
 // etc etc
}];

$.plot($('.chart'), data, function() {

      // Your options

      grid:  {
        clickable:true
      }

 });

将点击功能绑定到元素并使用javascript重定向到网址。

$('.chart').bind("plotclick", function(event,pos,obj) {
  window.location.replace(data[obj.seriesIndex].url);
});

Answer 3

通过Derek Kurth添加答案...

看起来flot忽略了我们在JSON中包含的任何其他对象。例如，当我使用

时

data: [10, 0, "http://stackoverflow.com"] 
// 0 is used as an intercept value for y-axis

它没有任何问题，我能够从事件处理程序访问数据，如

$("#placeholder").bind("plotclick", function (event, pos, item) {
    alert(item.series.data);
});

我是这个flot库的新手，并不擅长JavaScript。所以这可能不是正确的做事方式，但它有效。我一直觉得在HTML中的UI元素中嵌入附加信息是一件痛苦的事情:(

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

3 个答案: