简体   繁体   English

jQuery Flot Time缺少最后的x轴标签

[英]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). 问题在于,当我绘制图形时,最后的x轴标签未显示在轴上(即使正确绘制了值)。

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. 我想我已经将它缩小到'minTickSize'值为1天,但我需要它为1天所以我不知道如何解决这个问题。 I've put it in a jsfiddle here: http://jsfiddle.net/s7x5ef0p/1/ 我把它放在一个jsfiddle: http//jsfiddle.net/s7x5ef0p/1/

JS: 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. 最后一个标签将以图表边缘为中心,因此延伸到容器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. 最简单的解决方法是将x轴的最大值设置为更大的值,以便可以将标签安全地放置在图表和容器中。

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 更新小提琴

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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