Question

我忙于我的静力学，现在我想展示几个月而不是数字。但是当我把几个月的名字放在桌子上时，静态变得疯狂。

使用数字时一切正常，但我想在x轴上使用数字和月份。

我希望有人可以帮助我。

Answer 1

我厌倦了FLOT处理时间戳的方式。自动蜱发生器过多地混淆了（参见我上面的评论）。做自己的事情要好得多。将月份名称转换为“months”数组中的偏移量，然后使用：

xaxis: {tickSize: 1; tickFormatter: function(v, a) {return months[v]}}

获得你想要的x轴。

$("table.statics-date").each(function() {
    var colors = [];
    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    $("table.statics-date thead th:not(:first)").each(function() {
        colors.push($(this).css("color"));
    });
    $(this).graphTable({
        series: 'columns',
        position: 'replace',
        height: '200px',
        colors: colors,
        xaxisTransform: function(month) {
            var i=0; 
            while ((i < 12) && (month != months[i])){i++}
            return i;
        }
    }, {
        xaxis: {
            tickSize: 1,
            tickFormatter: function(v, a) {return months[v]}
       }
    });
});

当你在一年结束时（12月 - > 1月），你将不得不捣乱一点，但代码并不太难。

请参阅我的JSFIDDLE：http://jsfiddle.net/G4TJ3/6/ 关心尼尔

Answer 2

您需要在graphTable选项中包含“xaxisTransform”选项，并添加第二个参数，即“flot”本身的“xaxis”选项。基本上，您必须将月份名称转换为要绘制的时间戳，然后将时间戳转换回x轴的月份。

对graphTable的巡回演唱应该是这样的：

$(this).graphTable({
    series:        'columns',
    position:      'replace',
    height:        '200px',
    colors:         colors,
    xaxisTransform: function(month){return Date.parse(month + ' 1, 1970');}
   }
   ,
   {
    xaxis: {
            mode:       'time',
            timeformat: '%b'
           }
   } 
);

我已经在你的JSFIDDLE中检查了它并且它可以工作。

您不必使用时间戳。您可以提供自己的功能，例如xaxisTransform只能将月份名称转换为偏移量[0-11]，而对于flot选项，您可以使用：

    xaxis: {
            transform: function(monthOffset){return ..monthname as a string..;}
           }

实际上最后一点是错的，我认为它应该'转换'和'逆转换'。问候尼尔

Answer 3

我正在使用flot official docs

中所述的timeformat:"%d %b %y"

%a: weekday name (customizable)
%b: month name (customizable)
%d: day of month, zero-padded (01-31)
%e: day of month, space-padded ( 1-31)
%H: hours, 24-hour time, zero-padded (00-23)
%I: hours, 12-hour time, zero-padded (01-12)
%m: month, zero-padded (01-12)
%M: minutes, zero-padded (00-59)
%q: quarter (1-4)
%S: seconds, zero-padded (00-59)
%y: year (two digits)
%Y: year (four digits)
%p: am/pm
%P: AM/PM (uppercase version of %p)
%w: weekday as number (0-6, 0 being Sunday)

jsfiddle link

jQuery flot：graphTable插件如何显示月份

3 个答案: