javascript - 使用 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]);
    }
});

你会看到“点击！” 消息，但“项目”没有属性。

我在想您只需将 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 重定向到 url。

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

Answer 3

补充德里克库尔特的答案......

看起来 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 元素中嵌入额外的信息是一件很痛苦的事情 :(