javascript - jQuery Flot 不透明度取决于值

Question

一切顺利。

我需要根据它的值更改浮动条/饼图的颜色。

例如我有数据

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 标签值会动态变化，所以我不能只添加预定义的颜色。

Answer 1

已编辑，这应该可以

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

Answer 2

也许这个代码片段可以帮助你。我没有测试它，它可能不完全适合你的代码，但我认为我的主要想法是可见的:)。

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