1

私はjqueryチャートのニーズにflotを使用しています。次に、円グラフを追加する必要があります（これは、flotが非常にうまく機能することを私は知っています）。円グラフの場合、フロットに表示されなかった必要があるのは、各円グラフの値へのコールアウトです（このコールアウトは、ラベルと円グラフを結ぶ線が付いたラベルです）。誰かがコールアウトをフロートのパイピースで機能させる方法を知っていますか？

コールアウトが必要な主な理由は、サイズに関係なく、各パイピースのラベルを付ける必要があるためです。コールアウトを使用すると、パイのピースを小さくして、テキストがラベルと重なる可能性を減らすことができます。

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

前もって感謝します。

4

2 に答える 2

4

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

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

これが役立つかどうか教えてください！

于 2011-07-21T05:26:40.930 に答える
1

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

于 2011-07-21T04:29:13.910 に答える