Question

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

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

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

这是关于我工作的小提琴： 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一起使用到specify the fill color和alpha级别（透明度）：

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

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

JQuery Flot - 网格线不通过实线显示

1 个答案: