Jquery在X轴上绘制月份的Flot图表

时间:2014-07-09 12:53:14

标签: jquery flot

我有下面的代码来绘制图表。我希望在X轴上显示月/年,但是,当我运行应用程序时,它只显示我的第一个月。我怎样才能显示其他月份?

    var data1 = [
        [0, 4], [1, 8], [2, 5], [3, 10], [4, 4], [5, 16], [6, 5], [7, 11], [8, 6], [9, 11], [10, 30], [11, 10], [12, 13], [13, 4], [14, 3], [15, 3], [16, 6]
    ];
    var data2 = [
        [0, 1], [1, 0], [2, 2], [3, 0], [4, 1], [5, 3], [6, 1], [7, 5], [8, 2], [9, 3], [10, 2], [11, 1], [12, 0], [13, 2], [14, 8], [15, 0], [16, 0]
    ];
    $("#flot-dashboard-chart").length && $.plot($("#flot-dashboard-chart"), [
        data1, data2
    ],
            {
                series: {
                    lines: {
                        show: false,
                        fill: true
                    },
                    splines: {
                        show: true,
                        tension: 0.4,
                        lineWidth: 1,
                        fill: 0.4
                    },
                    points: {
                        radius: 0,
                        show: true
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: "#d5d5d5",
                    borderWidth: 1,
                    color: '#d5d5d5'
                },
                colors: ["#1ab394", "#464f88"],
                xaxis: {
                    mode: "time",                        
                    minTickSize: [1, "day"],
                    timeformat: "%b/%y"
                },
                yaxis: {
                    ticks: 4
                },
                tooltip: true
            }
    );

呈现图表

enter image description here

如果我从xaxis删除所有选项(即xaxis: { },),则在渲染图表中,某些点会出现在X轴上。

在xaxis上没有选项的呈现图表

enter image description here

1 个答案:

答案 0 :(得分:4)

要么:

xaxis:{ticks:[[1,Jan],[2,Feb],[3,Mar]}等等。

或尝试添加

axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10

了解更多here