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

我忙於靜態，現在我想顯示一些月份而不是數字。但是當我在表格中列出幾個月的名字時，靜態數據會變得瘋狂。jQuery flot：graphTable插件如何顯示月份

當你使用數字一切正常，但我想在x軸使用數字和月份。

我希望有人能幫助我。

2011-08-26 Maanstraat

我厭倦了FLOT處理時間戳的方式。 automatick tick產生器太多了（見上面我最後的評論）。更好地做你自己的事情。轉換的「月」陣列偏移月份名稱到，然後使用：

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]} 
     } 
    }); 
});

你必須做手腳了一下，當你GOVER一年年底（日 - >月），但代碼是不是太困難。

見我這樣的jsfiddle在：http://jsfiddle.net/G4TJ3/6/ 問候尼爾

來源

2011-08-30 14:16:42 Neil

嗨尼爾，這真棒！：）非常感謝！ – Maanstraat

鏈接已損壞 –

您需要在graphTable選項中包含一個「xaxisTransform」選項，並添加第二個參數「xaxis」選項以「flot」本身。基本上你必須將月份名稱轉換爲要繪製的時間戳，然後將時間戳轉換回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]，而對於海軍報的選項，你會使用，而不是：

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

實際上是最後一位是錯的，我覺得應該是「改造」 AND 'inverseTransform'。 Registers Neil

來源

2011-08-26 11:49:00 Neil

喜尼爾，日Thnx這是工作！但是當你有12個月的時間（1月 - 12月）時，你不會在xasis中看到Dec？這是爲什麼？ http://jsfiddle.net/G4TJ3/ ...在IE中這是行不通的？ – Maanstraat

嗨，關於IE，從https://github.com/flot/flot網頁：通常，所有支持HTML5 canvas標籤的瀏覽器都支持。爲了支持Internet Explorer <9，您可以使用Excanvas，一個畫布模擬器;這在與Flot捆綁的例子中使用。你只包括這樣的excanvas腳本：<！ - [如果LTE IE 8]> – Neil

關於12月「不出現，這是關於在x軸上自動生成滴答。一個軟肋是改變代碼說：xaxisTransform：function（month）{ return（month =='Jan'）？ Date.parse（month +'1，1970'）：Date.parse（month +'2，1970'）; }您可能還想添加「xaxis」選項「ticks：12」。 – Neil

我使用timeformat:"%d %b %y"述明的flot official docs

%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

來源

2014-12-12 06:00:13 abi1964

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

回答

相關問題