1

あなたが元気であることを願っています。

値に応じてフローバー/パイの色を変更する必要があります。

たとえば、私は次のようなデータを持っています

data = [
    { label: "Label 1", color: "orange", data: 10}
    { label: "Label 2", color: "orange", data: 20}
    { label: "Label 3", color: "orange", data: 70}
];

$.plot(placeholder, data, options);

ラベル 3 は最大のものとしてオレンジのままにし、ラベル 2 とラベル 1 は不透明にする必要があります (たとえば、-10% ごとに不透明度に -10 を与えます)。

そんな感じ：

ここに画像の説明を入力

正しい方向へのアイデアやヒントはありますか?

ありがとうございました！

PS ラベルの値は動的に変化するため、定義済みの色を追加することはできません。

4

2 に答える 2

6

編集済み、これは機能するはずです

    var data = [{ label: "Label 1", color: "rgba(255,165,0,1.0)", data: 10},
        { label: "Label 2", color: "rgba(255,165,0,1.0)", data: 20},
        { label: "Label 3", color: "rgba(255,165,0,1.0)", data: 70}]

    var maxOpacity = 0;

    data.forEach(function(a) {
        maxOpacity = Math.max(a.data, maxOpacity);
    });

    data.forEach(function(a) {
        var opacity = (((a.data * 100) / maxOpacity) / 100).toFixed(2);

        if (a.color.indexOf('rgba') == 0) {
            var b = a.color.split(',');
            b[3] = opacity;
            a.color = b.join(",") + ")";
        }
    });

    var placeholder = $("#placeholder");

    $.plot(placeholder, data, {
        series: {
            pie: { 
                show: true
            }
        }
    });
于 2013-03-14T13:15:52.703 に答える
0

たぶん、このコードスニペットはあなたを助けることができます。私はそれをテストしませんでした、そしてそれはあなたのコードに正確に適合しないかもしれません、しかし私は私の主な考えが目に見えると思います:)。

var array = [{ label: "Label 1", color: "orange", data: 10},
    { label: "Label 2", color: "orange", data: 20},
    { label: "Label 3", color: "orange", data: 70}];

array.sort(function(a, b){
    var a1= a.data, b1= b.data;
    if(a1== b1) return 0;
    return a1 > b1? 1: -1;
});

var arrLength = array.length;
var opacitySteps = 100 / arrLength;

for (var i = 0; i < arrLength; i++) {
    element = arr[i];
    element.color = opacitySteps * i;
}
于 2013-03-14T12:49:49.003 に答える