С помощью flot, как я могу создать связанную круговую диаграмму, которая приведет вас на другие веб-страницы? - PullRequest
Новая
       10

С помощью flot, как я могу создать связанную круговую диаграмму, которая приведет вас на другие веб-страницы?

5 голосов
/ 28 октября 2009

В flot , как я могу создать круговую диаграмму, где каждый клин является ссылкой на другую веб-страницу?

Ответы [ 3 ]

4 голосов
/ 28 октября 2009

Я дал ему шанс, но я не смог этого сделать. Я начал с этого примера , затем добавил: 

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-адреса к объектам данных, а затем перенаправите браузер на соответствующий URL-адрес из функции plotclick. Если вы разберетесь, мне было бы интересно узнать!

Обновление: Вот кое-что, что может сработать - он просто превращает ярлыки в ссылки. Поместите 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)+'%';

Щелчок в самих дольках пирога все же ничего особенного не делает.

1 голос
/ 11 февраля 2014

Я знаю, что это старая ветка, но я нашел другой способ сделать это.

Убедитесь, что 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);
});
0 голосов
/ 25 ноября 2013

Добавление к ответу Дерек Курт ...

Похоже, что 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);
});

Я новичок в этой библиотеке флотов и не очень хорош в JavaScript. Так что, вероятно, это не правильный способ сделать что-то, но это работает. Я всегда чувствовал, что встраивание дополнительной информации в элементы пользовательского интерфейса в HTML это боль: (

...