進行特定時間段的X軸浮標Jquery

Question

我想制作一個圖表，以4個月為間隔（3個周期/年）顯示數據。 我希望x軸標簽顯示年份和時期，如下圖所示：

http://i.stack.imgur.com/eerSy.png

到目前為止我做了什么：

    var data = [[1262278800000,87.5],[1293814800000,750],[1325350800000,100],[1356973200000,25],[1371229200000,87.5],[1388422800000,0],[1388509200000,375],[1402765200000,100],[1419958800000,1000]];
    var tahunsekarang=new Date(2015, 12, 31).getTime();    

    $.plot("#chartTabamaProduktifitas", [data], {
        xaxis: { mode: "time",tickSize: [4, "month"] ,  timeformat: "%Y",panRange: [1262217600000, tahunsekarang]},
        yaxis: {panRange: [0, 1500] },
        pan: { interactive: true},
        series: {lines: {show: true},points: {show: true}},
    });

但是由於我將其pan: { interactive: true}因此，當我拖動圖表時，刻度線始終是更改值，這使圖表線不適合刻度線

Answer 1

1）如果要在拖動圖表時使用固定刻度線，則必須提供固定ticks數組，而不是tickSize選項。

2）要給出三個月的羅馬數字，可以使用tickFormatter函數而不是timeformat選項。

新options對象：

xaxis: {
    mode: "time",
    ticks: ticks,
    tickFormatter: function (val, axis) {
        var d = new Date(val);
        var trimester = '';
        for (var i = 1; i <= (1 + d.getMonth() / 4); i++){
            trimester += "I";
        };
        return trimester + "<br>" + d.getFullYear();
    },
    panRange: [1262217600000, tahunsekarang]
},

有關工作示例，請參見下面的代碼片段（或此小提琴 ）：

 var data = [ [1262278800000, 87.5], [1293814800000, 750], [1325350800000, 100], [1356973200000, 25], [1371229200000, 87.5], [1388422800000, 0], [1388509200000, 375], [1402765200000, 100], [1419958800000, 1000] ]; var ticks = [ new Date(2010, 0, 1).valueOf(), new Date(2010, 4, 1).valueOf(), new Date(2010, 8, 1).valueOf(), new Date(2011, 0, 1).valueOf(), new Date(2011, 4, 1).valueOf(), new Date(2011, 8, 1).valueOf(), new Date(2012, 0, 1).valueOf(), new Date(2012, 4, 1).valueOf(), new Date(2012, 8, 1).valueOf(), new Date(2013, 0, 1).valueOf(), new Date(2013, 4, 1).valueOf(), new Date(2013, 8, 1).valueOf(), new Date(2014, 0, 1).valueOf(), new Date(2014, 4, 1).valueOf(), new Date(2014, 8, 1).valueOf(), new Date(2015, 0, 1).valueOf(), new Date(2015, 4, 1).valueOf(), new Date(2015, 8, 1).valueOf(), ]; var tahunsekarang = new Date(2015, 12, 31).getTime(); $.plot("#chartTabamaProduktifitas", [data], { xaxis: { mode: "time", //tickSize: [4, "month"], ticks: ticks, //timeformat: "%Y", tickFormatter: function (val, axis) { var d = new Date(val); var trimester = ''; for (var i = 1; i <= (1 + d.getMonth() / 4); i++){ trimester += "I"; }; return trimester + "<br>" + d.getFullYear(); }, panRange: [1262217600000, tahunsekarang] }, yaxis: { panRange: [0, 1500] }, pan: { interactive: true }, series: { lines: { show: true }, points: { show: true } }, }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.navigate.min.js"></script> <div style="height: 400px; width: 600px;" id="chartTabamaProduktifitas"></div>