5

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

4

3 に答える 3

4

やってみましたが、できませんでした。この例から始めて、次を追加しました。

grid: { clickable: true },

「パイ：{」行のすぐ上。次に、最後に 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)+'%';

ただし、パイのくさび自体をクリックしても、特別なことは何もありません。

于 2009-10-28T19:33:35.293 に答える
1

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

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);
});
于 2014-02-11T15:48:14.350 に答える
0

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 要素に追加情報を埋め込むのが面倒だと感じていました :(

于 2013-11-25T12:31:40.623 に答える