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

StackOverflow https://stackoverflow.com/questions/1633728

  •  06-07-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

grid: { clickable: true },

прямо над "пирогом": {" линия. Затем я добавил функцию plotclick в конце: 

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

Вы увидите " нажмите! " сообщение, но "элемент" не имеет свойств.

Я думал, что вы просто добавите 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)+'%';

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

Другие советы

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

Убедитесь, что для 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);
});

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

Похоже, что 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 это боль: (

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top