javascript - Flot 折线图渐变填充

Question

我的问题可能与此重复，也可能不重复 Gradients on Flot

根据上面链接的回答，我尝试在折线图上应用渐变填充。它没有按预期工作。这是我试过的代码；

$(function () {
    var d1 = [[1,14], [2,15], [3,18], [4,16], [5,19], [6,17], [7,15], [8,16], 
        [9,20], [10,16], [11,18]];
    $.plot("#line-chart", [{
        data: d1,
        label: "Data",
        }],
        {
            series: {
                lines: {
                    show: true,
                    lineWidth: 1,
                    fill: 0.25,
                },
                gradient: {
                    radial: true,
                    colors: [
                        {opacity: 0.5},
                        {opacity: 1.0}
                    ]
                },
                shadowSize: 0,
                points: {
                    show: true,
                }
            },
            yaxis: {
                min: 10,
                max: 22,
                tickColor: 'rgba(255,255,255,0.15)',
                tickDecimals: 0,
                font :{
                    lineHeight: 13,
                    style: "normal",
                    color: "rgba(255,255,255,0.8)",
                },
                shadowSize: 0,
            },
            xaxis: {
                tickColor: 'rgba(255,255,255,0)',
                tickDecimals: 0,
                font : {
                    lineHeight: 13,
                    style: "normal",
                    color: "rgba(255,255,255,0.8)", 
                }
            },
            grid: { 
                borderWidth: 1,
                borderColor: 'rgba(255,255,255,0.25)',
                labelMargin:10,
                hoverable: true,
                clickable: true,
                mouseActiveRadius:6,
            },
            legend: {
                show: false
            }
        }
    );
});

帮我在折线图上添加渐变填充。

Answer 1

渐变选项是 pie 插件使用的一个特殊的东西。常规系列将渐变更像是一种颜色，您可以将其用作系列 fillColor。

看看Specifying Gradients下的例子示例的文档部分。