Question

这是我的代码：

var xaxisdata = xaxis;
var data1=yaxis;
var data2 = yaxis2;

var dataset = [
    {
       label:cond[1],
        data: yaxis,
        yaxis: 1,
        color: "#990099",
        points: { symbol: "circle", fillColor: "#990099", show: false },
        lines: {show:true }
    },
    {
        label:cond[2],
        data: data2,
        yaxis: 2,
        color: "#b7cb37",
        points: { symbol: "circle", fillColor: "#b7cb37", show: false },
        lines: { show: true }    
    },
];

var options = {
    xaxis: {
        ticks: xaxisdata,       
        // axisLabel: "2012",
        color: "#8b8b8b",
        axisLabelUseCanvas: false,
        axisLabelFontSizePixels: 9,
        // axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10,
        minTickSize: 35,
    },    
    yaxes: [
        {
            position: "left",
            color: "#8b8b8b",
            min:minleft,max:maxleft,
            axisLabel: cond[1],
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 0
        },
        {
            position: "right",
            min:minright,max:maxright,
            color: "#8b8b8b",
            axisLabel: cond[2],
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3
        },
    ],

    legend: {
        noColumns: 0,
        labelFormatter: function (label, series) {
            return "<font style=\"color:#999;\">" + label + "</font>";
        },            
        backgroundColor: "#fff",
        backgroundOpacity: 0.9,
        labelBoxBorderColor: "#e5e5e5",
        position: "nw"
    },
    grid: {
        hoverable: true,
        borderWidth: 0,
        mouseActiveRadius: 50,
        backgroundColor: { colors: ["#fff", "#fff"] },
        axisMargin: 20
    }
};

$(document).ready(function () {
    $.plot($("#flot-placeholder"), dataset, options);
    $("#flot-placeholder").UseTooltip();
});


});

我想在x轴之间建立间隔，而不是它们彼此重叠。它包含日期系列数据

0,2011-11-04,1,2011-11-04,2,2011-11-04,3,2011-12-16,4,2011-12-16,5,2011-12-16,6,2012-05-11,7,2012-05-11,8,2012-05-11,9,2012-07-13,10,2012-07-13,11,2012-07-13,12,2012-08-09,13,2012-08-09,14,2012-08-09,15,2012-08-31,16,2012-08-31,17,2012-08-31,18,2012-11-09,19,2012-11-09,20,2012-11-09,21,2013-02-08,22,2013-02-08,23,2013-02-08,24,2013-02-25,25,2013-02-25,26,2013-02-25,27,2013-08-09,28,2013-08-09,29,2013-08-09,30,2013-11-22,31,2013-11-22,32,2013-11-22,33,2014-05-05,34,2014-05-05,35,2014-05-05,36,2014-06-27,37,2014-06-27,38,2014-06-27

我希望在这个日期范围之间建立间隔，例如5个月的差距或年差距。有没有办法做到这一点？我试过了minTIckSize，但似乎没有用。

Answer 1

你可以定义，

mode: time,
tickSize: [1, "day"] // show ticks at an interval of 1 day

<强> tickSize：

另一种选择是跳过舍入部分并直接设置勾选区间大小用＆＃34; tickSize＆＃34;。如果你把它设置为2，你就会得到滴答声 2,4,6等。或者，您可以指定您不想要的使用＆＃34; minTickSize＆＃34;以小于特定刻度大小的刻度。请注意，对于时间序列，格式为[2，＆＃34; month＆＃34;]等数组，见下一节。

<强> Demo

如何在xaxis flot jquery图中创建日期之间的间隔

1 个答案: