フロットを使用して、他のWebページに移動するリンク円グラフを作成するにはどうすればよいですか？

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

  •  06-07-2019
  •  | 
  •  

質問

flot で、各ウェッジがリンクされている円グラフを作成するにはどうすればよいですか別のウェブページですか？

役に立ちましたか？

解決

試してみましたが、できませんでした。 この例から始めて、追加しました：

grid: { clickable: true },

＆quot;パイのすぐ上：{＆quot;ライン。次に、最後にplotclick関数を追加しました：

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

＆quot;クリック！＆quot;が表示されます。メッセージ、ただし「アイテム」プロパティはありません。

データオブジェクトに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)+'%';

パイウェッジ自体をクリックしても、特別なことは何も行われません。

他のヒント

これは古いスレッドであることは知っていますが、これを行う別の方法を発見しました。

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);
});

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要素に追加情報を埋め込むのは苦痛だと感じてきました：（

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top