web-dev-qa-db-ja.com

Jquery Flot円グラフは、パーセンテージではなくデータ値を表示します

Flot.pieを取得して、ラベルに表示されているデータを「生データ」のパーセンテージから実際のデータに変更する方法がわかりません。私の例では、既読/未読メッセージの数を含む円グラフを作成しました。

既読メッセージ数：50。未読メッセージ数：150。

作成された円は、既読メッセージの割合を25％として表示します。このスポットでは、実際の50のメッセージを表示します。下の画像を参照してください。

enter image description here

パイの作成に使用したコード：

var data = [
    { label: "Read", data: 50, color: '#614E43' },
    { label: "Unread", data: 150, color: '#F5912D' }
];

そして：

    $(function () {
        $.plot($("#placeholder"), data,
           {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    label: {
                        show: true,
                        radius: 2 / 3,
                        formatter: function (label, series) {
                            return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';

                        },
                        threshold: 0.1
                    }
                }
            },
            legend: {
                show: false
            }
        });
    });

これは可能ですか？

@Ryleyの答えで、私は汚い解決策に行きました。 series.dataを出力すると、「1,150」と「1,50」という値が返されました。戻り値の最初の2文字を減算して、減算した値を表示するというアイデアを思いつきました。

String(str).substring(2, str.lenght)

これは、このソリューションで作成した円グラフです。

enter image description here

これは最善の解決策ではありませんが、私にとってはうまくいきます。誰かがより良い解決策を知っているなら...

jqueryflotpie-chart
24
Ruud van de Beeten

私はその質問に対する答えを見つけました。データオブジェクトは多次元配列です。実際のデータを取得するには、次のコードを使用します。

    $(function () {
    $.plot($("#placeholder"), data,
       {
        series: {
            pie: {
                show: true,
                radius: 1,
                label: {
                    show: true,
                    radius: 2 / 3,
                    formatter: function (label, series) {
                        return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>';

                    },
                    threshold: 0.1
                }
            }
        },
        legend: {
            show: false
        }
    });
});

データを抽出するコード「series.data [0] [1]」に注意してください。

44
Ruud van de Beeten

これは、「この場所で実際の50件のメッセージを表示したい」という意味によって多少異なります。
[既読]または[未読]セクションにマウスを合わせたときにdivポップアップを表示し、そこにメッセージを表示するとします。

最初のステップは、円グラフをインタラクティブにすることです。次のようにgridオプションを追加する必要があります。

legend: {
    show: true;
},
grid: {
    hoverable: true,
    clickable: true
}

次に、クリック/ホバーイベントを、メッセージを取得して表示する関数にバインドする必要があります。

$("#placeholder").bind('plothover',function(e,pos,obj){

});

$("#placeholder").bind('plotclick',function(e,pos,obj){
    if (obj.series.label == 'Read'){
       //show your read messages
    } else {
       //show your unread messages
    }       
});

それでおしまい！

これで、すべてのメッセージを常にパイに直接表示したいというだけの場合は、メッセージを含むグローバル変数を参照するようにフォーマッターを変更する必要があります。

2
Ryley

あなたが使用することができます：

formatter: function (label, series) {
    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+Math.round(series.percent)+"%<br/>" + series.data[0][1] +'</div>';
},
1
Diogenes Chepe Ardines Salazar

ProtoVis のようなものを試してください。 SO他の無料の有用なデータ視覚化ライブラリへのリンクを含む）にもいくつか良い回答があります。$ フュージョンチャート がある場合も非常に良いです。

0
FoneyOp