jQuery flot ...如何填充样条曲线？

Question

我正在使用 jQuery flot 插件并尝试填充样条线。但是，只有当我在 lines 中设置 show: false 时，我才能填充它，这会导致显示第二行。我做错了什么？

我有这样的代码:

$(function () {        
$.plot($("#flotcontainer"),
    [{
          data: data9_1,
          label: "Page Views",
          color: "#e74c3c"
        }
    ],{            
        series: {
                            lines: {
                                show: true, 
                                fill: 0.3,
                                lineWidth: 1,
                                fillColor: "#d5d5d5"
                            },
                            splines: {
                                show: true,
                                tension: 0.4,
                                lineWidth: 1,
                                fill: 1
                            },
                            points: {
                                radius: 5,
                                show: true,
                                fill: true,
                                fillColor: "#ffffff"
                            },
                            shadowSize: 2
                        },
        grid: {
                            hoverable: true,
                            clickable: true,
                            tickColor: "#d5d5d5",
                            borderWidth: 1,
                            color: '#d5d5d5'
                        },
        colors: ["#1ab394", "#464f88"],
        xaxis:{
               ticks: [
                        [1, "Jan 2015"], 
                        [2, "Feb 2015"], 
                        [3, "Mar 2015"], 
                        [4, "Apr 2015"]
               ],
               color: "#838383"
        } ,
        yaxis: {
                            ticks: 4
        },
        legend: {
            show: false,
        }
    }
);

$("#flotcontainer").UseTooltip();

});

它显示如下:

如果我从行中删除 show: true ，它会删除第二行，但也会删除填充。

如何获得带有填充的平滑样条曲线？

Answer 1

您似乎正在使用 this spline plugin 。请参阅this comment在同一页面上查看具有填充功能的 fork 版本:

@aaronaverill: I also needed the fill to work so I forked the plugin and fixed it.

You can set the fill via the splines: { fill: (float between 0 and 1 || false) } option. The seriesColor will automatically be used.

My fork also draws the entire line at once instead of doing it one segment at a time so it should be faster.

The fork is here: https://github.com/AMKohn/flot/blob/master/jquery.flot.spline.js

And I put together a demo here: http://jsfiddle.net/MHTEy/1/

Since the project I'm working on doesn't use any area charts I'm not sure if it works with them properly. I also used a slightly modified version of flot while working on it but that shouldn't affect anything.