jQuery Flot不会在X轴上显示月份作为标签

时间:2014-04-09 15:49:39

标签: javascript jquery flot

如上所述,X轴标签未按预期显示月份。我做错了什么?

这是我的示例代码 HTML:

<div id="placeholder"></div>

CSS:

    #placeholder {
    height: 300px;
}

使用Javascript:

    var d1 = [
    [1388530800, 4],
    [1393542000, 8],
    [1396216800, 3],
    [1398808800, 16],
    [1401487200, 2],
    [1404079200, 2],
    [1406757600, 28],
    [1409436000, 24],
    [1412028000, 0],
    [1414710000, 18],
    [1417302000, 0],
    [1419980400, 11]
];
var d2 = null;
var d3 = null;
var d4 = null;
var d5 = null;
var d6 = [
    [1388530800, 2],
    [1396303200, 2],
    [1398895200, 1],
    [1401573600, 1],
    [1406844000, 1],
    [1409522400, 1],
    [1417388400, 1]
];

var data1 = [{
    data: d1,
    points: {
        fillColor: "#d1e399"
    },
    color: '#d1e399'
}, {
    data: d2,
    points: {
        fillColor: "#ecc0ce"
    },
    color: '#ecc0ce'
}, {
    data: d3,
    points: {
        fillColor: "#daeaed"
    },
    color: '#daeaed'
}, {
    data: d4,
    points: {
        fillColor: "#e6ceea"
    },
    color: '#e6ceea'
}, {
    data: d5,
    points: {
        fillColor: "#edb9a6"
    },
    color: '#edb9a6'
}, {
    data: d6,
    points: {
        fillColor: "#92e48a"
    },
    color: '#92e48a'
}];

$.plot($("#placeholder"), data1, {
    xaxis: {
        mode: "time",
        minTickSize: [1, "month"],
        tickLength: 1,
        ticks: 12
    },
    yaxis: {
        tickSize: 5
    },
    grid: {
        hoverable: true,
        borderWidth: 1
    },
    series: {
        lines: {
            show: true,
            lineWidth: 1,
            fill: true,
            fillColor: {
                colors: [{
                    opacity: 0.1
                }, {
                    opacity: 0.13
                }]
            }
        },
        points: {
            show: true,
            lineWidth: 2,
            radius: 3
        },
        shadowSize: 0,
        stack: true
    },
    clickable: true,
    hoverable: true
});

JSFiddle中的代码 - &gt; http://jsfiddle.net/v5M9L/11/

感谢您的帮助!

1 个答案:

答案 0 :(得分:4)

我怀疑你的问题是你的时间戳是以秒为单位而不是毫秒。将所有数据乘以1000似乎可以得到您想要的结果:

{ data: d1.map(function(d) { return [d[0] * 1000, d[1]]; }), points: { fillColor: "#d1e399" }, color: '#d1e399'}

http://jsfiddle.net/v5M9L/12/