更改flot圖的x軸單位

Question

我能夠繪制具有30個數據點的圖形，並且所有點都顯示在圖形中。 圖表看起來很狹窄。 我想的是顯示數據點數為5的倍數。假設我有30個點，我的圖形應該像[0,5,10,15,20,25,30]那樣作為軸點。 在我們繪制圖形時，數學上說1個單位= 5個點。 我不知道該怎么做。 當方法要看時，有人能指出我至少從文檔中找到正確的方向。

var options = {
        series: {           
            lines: {
                show: true,
                lineWidth: 1,                   
                fillColor: {colors:[{opacity: 1},{opacity: 1}]}, 
                align: "right" 
            }           
       },
       grid: {
            show: true,
            markings: [{xaxis: {from: 0, to: 5}}]
       },      
       xaxis:{
            tickFormatter:timeTickFormatter,
            tickSize : 1
       },
       yaxis: { 
            max:24
       }
    };

function timeTickFormatter(val,axis) {

        var returnDate =new Array();    
        <% for (String dateValue: pasDays) { %>

            returnDate.push("<%= dateValue %>");

        <% } %>

        return returnDate[val];
    }

$(document).ready(function () {
        $.plot($("#HoursChart"), [ { label : "Work Hours", data: <%= workHrsDaily %>  },
                                                                  { label : "Idle Hours", data: <%= idleHrsDaily %> } ], options);

    });

更新：我將tickSize更改為5，它顯示5個數據點:)！

Answer 1

很確定你可以這樣做： ticks: [0, 5, 10, 15, 20, 25, 30]

從Flot API文檔中 ：

如果要完全覆蓋tick算法，可以為“ticks”指定一個數組，如下所示：

蜱：[0,1.2,2.4]

您可能需要tickSize: 1屬性，因為這tickSize: 1 ticks的間隔設置為1。 如果設置了tickSize到像6 （對於30的長度），這將給你以間隔5, 10, 15, 20, 25, 30