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部分下的示例作为示例。

Answer 2

我用;

网格：{ backgroundColor：{colors：[“＃4ca8fa”，“＃2887da”]}，

在javascript部分中显示渐变背景，如果有帮助的话。

Flot折线图渐变填充

2 个答案: