2

円グラフ flot ライブラリを使用して円グラフ グラフを描画しました。独自のカスタム凡例ボックスを作成しました。そのため、ユーザー入力に基づいて特定のスライスを非表示にできるかどうかを知りたいと思っていました。ここのように、jsfiddle に同様の例を追加しました。

ここでは、チャートの下部に凡例ボックスを作成し、jquery を使用してホバー機能を追加しました。これらの凡例にカーソルを合わせると、対応するスライスが非表示になるはずです。

http://jsfiddle.net/mHJm5/18/

var data = [
   {
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/"}
  ];

var options = {
   series: { pie: { show: true, label: false, } },
   grid: { clickable: true},
   legend: {
            show: false
        }

 };

  var testHTML = '';
  for(var k=0; k<data.length; k++){
    testHTML += "<span class = 'hoverableSpace' id='"+ data[k].label+"'>"+  data[k].label +"</span>";
  }

$(".mapper").html(testHTML);

var plot = $.plot($("#graphLoaderDiv"), data, options);


$(".hoverableSpace").on("mouseover", function(){
   alert($(this).attr('id'));
});
4

1 に答える 1

0

凡例要素のクリックをリッスンします。取得したら、対応するシリーズに合わせ (これを行うには多くの方法があります)、シリーズの色を 'transparent' または 'rgba(0, 0, 0, 0)' に設定してから、再描画します。

于 2013-08-21T04:48:13.433 に答える