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

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

我尝试了一下，但没能做到。我从开始，然后补充说：

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

return'
'+数学四舍五入（serie.percent）+'%；

尽管如此，点击饼图楔子本身仍然没有什么特别的作用。

通过

看起来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元素中嵌入附加信息是一件痛苦的事：（

我知道这是一个老问题，但我发现了另一种方法

确保

grid

设置为

clickable

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

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

      // Your options

      grid:  {
        clickable:true
      }

 });

将click函数绑定到元素，并使用javascript重定向到url

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

---

谢谢！我从来没有编写过javascript，但我需要一个引人注目的、易于访问的报告来激发一些更好的行为。