javascript - JQuery Flot - 网格线不通过填充线显示

Question

我正在尝试创建一个实时 flot，我的问题是我无法通过填充数据行来查看 flot 网格 ..

如果您有任何想法让我的填充有点透明，如下图所示，我也想在我的 Fiddle 上应用它!

---

我想要实现的是这样的: Picture of what I try to get

这是关于我正在工作的 fiddle : My flot on Fiddle

代码:

---

$(function () {

    getRandomData = function(){
        var rV = [];
        for (var i = 0; i < 10; i++){
             rV.push([i,Math.random() * 10]);
        }
        return rV;
    }

    getRandomDataa = function(){
        var rV = [];
        for (var i = 0; i < 10; i++){
             rV.push([i,Math.random() * 10 + 5]);
        }
        return rV;
    }

    getSeriesObj = function() {
        return [
        {
            data: getRandomDataa(),
            lines: { 
                show: true, 
                fill: true,
                lineWidth: 5,
                fillColor: { colors: [ "#b38618", "#b38618" ] },
                tickColor: "#FFFFFF",
                tickLength: 5
            }
        }, {
            data: getRandomData(),
            lines: {
                show: true,
                lineWidth: 0,
                fill: true,
                fillColor: { colors: [ "#1A508B", "#1A508B" ] },
                tickColor: "#FFFFFF",
                tickLength: 5
            }
        }];
    }

    update = function(){
        plot.setData(getSeriesObj());
        plot.draw();
        setTimeout(update, 1000);
    }

    var flotOptions = {  
        series: {
            shadowSize: 0,  // Drawing is faster without shadows
            tickColor: "#FFFFFF"
        },
        yaxis: {
            min: 0, 
            autoscaleMargin: 0,
            position: "right",
            transform: function (v) { return -v; },     /* Invert data on Y axis */
            inverseTransform: function (v) { return -v; }, 
            font: { color: "#FFFFFF" },
            tickColor: "#FFFFFF"
        },
        grid: {
            backgroundColor: { colors: [ "#EDC240", "#EDC240" ], opacity: 0.5 }, // "Ground" color (May be a color gradient)
            show: true,
            borderWidth: 1,
            borderColor: "#FFFFFF",
            verticalLines: true,
            horizontalLines: true,
            tickColor: "#FFFFFF"
        }
    }; 

    var plot = $.plot("#placeholder", getSeriesObj(), flotOptions);

    setTimeout(update, 1000);
});

非常感谢!

Answer 1

您可以使用 rgba()颜色规范与 flot to specify the fill color和 alpha 级别(透明度):

fillColor: { colors: [ "rgba(179, 134, 24, .2)", "rgba(179, 134, 24, .2)" ] },

0 的 alpha 值是完全透明的，而 1 的 alpha 值是完全不透明的。