简体   繁体   中英

jQuery Flot Time missing last x-axis label

The problem is that when I plot a graph, the last x-axis label isn't shown on the axis (even though the value is plotted correctly).

I think I've narrowed it down to the 'minTickSize' value being 1 day, but I need it to be 1 day so I'm not sure how to get around that. I've put it in a jsfiddle here: http://jsfiddle.net/s7x5ef0p/1/

JS:

function plotGraph(graphData){

    var graphData = [{
        data: graphData.sort(),
        color: '#FFF'
    }];

    $.plot($('#graph'), graphData, {
        series: {
            points: {
                show: true,
                radius: 5
            },
            lines: {
                show: true
            },
            shadowSize: 3
        },
        grid: {
            color: '#FFF',
            borderColor: 'transparent',
            borderWidth: 20,
            hoverable: true
        },
        xaxis: {
            mode: "time",
            timeformat: "%d/%m/%y",
            minTickSize: [1,"day"],
            tickColor: 'transparent'
        },
        yaxis: {
            tickSize: 1
        }
    });
}

var graphData = [[1430953200000,107],[1430953200000,107],    [1430953200000,107],[1430953200000,107],[1430953200000,107]
,[1430953200000,107],[1430866800000,107],[1430780400000,107]];

plotGraph(graphData);

The last label would be centered at the edge of the chart and therefore extend outside the container div.
The simplest workaround is to set the max value for the x axis to a larger value so that the label can be safely placed inside the chart and container.

xaxis: {
    mode: "time",
    timeformat: "%d/%m/%y",
    minTickSize: [1,"day"],
    tickColor: 'transparent',
    max: 1430957400000 // max value from your data + 2 hours
},

updated fiddle

Alternatively you could specify the ticks manually:

xaxis: {
    mode: "time",
    timeformat: "%d/%m/%y",
    ticks: [1430780400000, 1430866800000, 1430953200000],
    tickColor: 'transparent',
},

updated fiddle

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM