24

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

既読メッセージ数: 50. 未読メッセージ数: 150.

作成された円は、既読メッセージの割合が 25% であることを示しています。この場所で、実際の 50 件のメッセージを表示したいと思います。下の画像を参照してください。

ここに画像の説明を入力

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

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)

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

ここに画像の説明を入力

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

4

4 に答える 4

44

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

    $(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] 」に注意してください。

于 2011-04-18T08:51:21.453 に答える
2

これは、「この場所で実際の 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
    }       
});

それでおしまい！

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

于 2011-04-15T15:21:37.787 に答える
0

ProtoVisのようなものを試してください。SO には、他の無料の便利なデータ視覚化ライブラリへのリンクを含むいくつかの適切な回答もあります。あなたがいくつかの$フュージョンチャートを持っているなら、それもかなり良いです.

于 2011-04-15T15:11:24.383 に答える