用倒置填充绘制的图表

时间:2014-11-04 17:44:44

标签: javascript jquery flot

我使用JQuery Flot在我的图表中出现了一个奇怪的行为。

当我正在绘制一个正确的图表时,蓝色填充会像下面的图像一样反转。

月度图表没问题。

图表

enter image description here

CODE

var data2014 = [];
var result = [[[1388534400000, 120371436.81027323], [1356998400000,187385608.24066913]]];
var p = 1;
var i = 0;

for (i = 0; i < result.length; i++, p++) {
    data2014.push({
        label: "Receitas",
        data: result[i],
        xaxis: p
    });
}

var dataMaxSplines = (new Date(new Date().getFullYear() + "/1/1")).getTime();

var graficoTipoSpLines = {
    series: {
        splines: {
            show: true,                            
            tension: 0.19,
            lineWidth: 1,
            fill: 0.4
        },
        points: {
            radius: 2,
            show: true
        },
        shadowSize: 2
    },
    grid: {
        hoverable: true,
        clickable: true,
        tickColor: "#d5d5d5",
        borderWidth: 1,
        color: "#d5d5d5"
    },
    colors: ["#00508F", "#F47920"],
    xaxes: [
        {
            mode: "time",
            tickSize: [1, "year"],
            tickLength: null,
            colors: ["#838383", "#838383"],
            timeformat: "%Y",
            max: dataMaxSplines
        },
        {
            ticks: false
        }
    ],
    yaxis: {
        ticks: 4,
        tickFormatter: function (val, axis) {
            if (val > 999999) {
                return val.toString().replace(/\d{6}$/, "M");
            } else if (val > 999 && val <= 999999) {
                return val.toString().replace(/0{3}$/, 'K');
            } else {
                return val;
            }
        }
    },
    legend: {
        backgroundOpacity: 0.5,
        noColumns: 1,
        position: "nw",
        color: "#000000 !important"
    }
}

$.plot($("#container"), data2014, graficoTipoSpLines);

http://jsfiddle.net/fbknhrk5/1/

1 个答案:

答案 0 :(得分:0)

在系列选项中,将splines替换为lines。请参阅此更新fiddle