Javascript jQuery Flot不透明度取决于值

希望你身体健康

我需要根据它的值更改flot bar/pie颜色

例如，我有如下数据：

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%）

诸如此类：

有正确方向的想法或提示吗

谢谢大家!

---

另外，标签值将动态更改，因此我不能只添加预定义的颜色。

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

var数组=[{label:“label 1”，颜色：“橙色”，数据：10}，
{标签：“标签2”，颜色：“橙色”，数据：20}，
{标签：“标签3”，颜色：“橙色”，数据：70}]；
array.sort（函数（a，b）{
var a1=a.数据，b1=b.数据；
如果（a1==b1）返回0；
返回a1>b1？1:-1；
});
var arrLength=array.length；
var opacitySteps=100/棱长；
对于（变量i=0；i

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

var数组=[{label:“label 1”，颜色：“橙色”，数据：10}，
{标签：“标签2”，颜色：“橙色”，数据：20}，
{标签：“标签3”，颜色：“橙色”，数据：70}]；
array.sort（函数（a，b）{
var a1=a.数据，b1=b.数据；
如果（a1==b1）返回0；
返回a1>b1？1:-1；
});
var arrLength=array.length；
var opacitySteps=100/棱长；
对于（变量i=0；i

已编辑，应该可以使用

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

---

编辑后，这应该会起作用

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

---

只需将“不透明度”设置为值/100？因此，10%的饼图不透明度为.1，70%的饼图不透明度为.7。你也可以这样做，最大的饼图是1不透明度，其他饼图是相对的，因此10%将有1/7的不透明度，20%将有2/7的不透明度。只需将不透明度设置为值/100？因此，10%的饼图不透明度为.1，70%的饼图不透明度为.7。你也可以这样做，最大的饼图是1不透明度，其他饼图是相对的，所以10%的饼图有1/7的不透明度，20%的饼图有2/7的不透明度。谢谢。但我如何将其合并并推送到$.plot（占位符、数据、选项）；作为数据（或任何其他数组）？知道如何将颜色：“橙色”转换为rgba吗？为每个颜色添加不透明度值，并将它们组合为{标签：“标签1”，颜色：“橙色带不透明度”，数据：10}？：）我已经开始使用getRGBA插件编写一些代码，但这看起来要短得多！谢谢这很重要，谢谢你。但我如何将其合并并推送到$.plot（占位符、数据、选项）；作为数据（或任何其他数组）？知道如何将颜色：“橙色”转换为rgba吗？为每个颜色添加不透明度值，并将它们组合为{标签：“标签1”，颜色：“橙色带不透明度”，数据：10}？：）我已经开始使用getRGBA插件编写一些代码，但这看起来要短得多！谢谢