jQuery Flot Pie Chart - ラベルのコールアウトですか？

Question

私は自分のjqueryチャートのニーズにflotを使用してきました。さて、私は円グラフを追加する必要があります（私はflotがかなりうまくいくことを知っています）。円グラフでは、私が必要としていたのは、小片が見えなかったことでしたが、各小片の値に吹き出しがありました（吹き出しはラベルを小片に接続する線で表示されます）。誰もが吹き出しでパイの作品で動作するコールアウトを取得する方法を知っていますか？

吹き出しが必要な主な理由は、サイズにかかわらず各パイのラベルが必要なためです。吹き出しは、小さな円の部分を持ち、ラベルとのテキストの重なりの可能性を減らすことができます。

私は凡例の使用を提案しましたが、これはビジネスにとって容認できません。私は他のチャート作成ソリューションでもラベルの呼び出しを可能にしていますが、可能であればflotを使い続けたいと思います。

ありがとうございます。

Answer 1

私はplothoverのテストに似た何かを追加しました。特定のシナリオにソリューションを適合させる必要がありますが、これは大きな助けになるはずです。

function showTooltip(x, y, contents) { 
    $('<div id="tooltip">' + contents + '</div>').css({ 
     position: 'absolute', 
     top: y + 5, 
     left: x + 5, 
     border: '1px solid #fdd', 
     padding: '2px', 
     'background-color': '#fee', 
     opacity: 0.80 
    }).appendTo("body");//.fadeIn(200); 
} 

var previousPoint = null; 

$('#placeholder').bind('mouseout', function() { 
    plot.unhighlight(); 
    $("#tooltip").remove(); 
    $(this).data('previous-post', -1); 
}); 

$('#placeholder').bind('plothover', function(event, pos, item) { 
    if (item) { 
     if ($(this).data('previous-post') != item.seriesIndex) { 
      plot.unhighlight(); 
      plot.highlight(item.series, item.datapoint); 
      $(this).data('previous-post', item.seriesIndex); 
     } 
     $("#tooltip").remove(); 
     y = 'on ' + (new Date(item.datapoint[0])).toDateString() + ': ' + item.datapoint[1]; 
     showTooltip(pos.pageX, pos.pageY, item.series.label + " " + y); 
    } else { 
     plot.unhighlight(); 
     $("#tooltip").remove(); 
     previousPost = $(this).data('previous-post', -1); 
    } 
}); 

これが役立つ場合はお知らせください。

Answer 2

plothoverイベントを使用してコールアウトを表示できます。吹き出しのラベルは、好きな場所に置くことができます。これは最後の例のFlot Pageに示されています。 Googleスプレッドシートはリンクされたものと同様のソリューションを使用しており、非常にうまく機能します。