2012-05-08 116 views
1

我試圖讓它的日期x軸。 x數據是時間戳。不知何故,我無法做到。jqplot日期軸從時間戳

該生產線具有類似的值:

line = [[1334856823000, 2], [1334856853000, 1], [1334856883000, 0], [1334856913000,4],[1334856914000, 13], [1334856943000, 16], [1334856973000, 23], [1334857003000, 24], [1334857033000, 36], [1334857063000, 14], [1334857093000, 1]] 

      $.jqplot('container', [line], 
       { title: "Snelheidsgrafiek", 
       axes: { 
        xaxis: { 
        rederer: $.jqplot.DateAxisRenderer, 
        rendererOptions: {tickRenderer: $.jqplot.canvasAxisTickRenderer}, 
        tickOptions: {formatString: '%H:%M'} 
        }, 
        yaxis: { 
        min: 0 
        } 
       } 
      }); 

現在,它只是顯示爲%H:%M標籤。 我嘗試了很多變化,但無法實現。

回答

3

在這裏。 您的問題是tickRenderer: $.jqplot.CanvasAxisTickRenderer應與renderer處於同一水平,而不在rendererOptions之內。

Please see the jsfiddle.

編輯

而且你缺少的CanvasTextRenderer其中CanvasAxisTickRenderer而進口和你忘了大寫字母C開始,像這樣:$.jqplot.CanvasAxisTickRenderer

+0

THX,but..damn,不能讓它去......我看到它在工作的jsfiddle,甚至與整個線陣列在它。我複製了代碼和腳本標記,但仍顯示'%H:%M'。任何想法如何調試? – Jeroen

+0

看看Firebug控制檯。看看你是否有一些有意義的錯誤。另外請讓我知道你正在導入什麼(即你使用什麼腳本,以及如何將它們添加到你的頁面)。 – Boro

+0

我使用jQuery 1.6.4,我已經下載了最新的zip(版本1.0.0b2-r1012)並使用樹縮小文件。 我把所有東西都搬到了測試服務器上,現在它可以正常工作,儘管縮放比例(x軸的最小值和最大值仍然很奇怪,我會給你發一個鏈接 – Jeroen

0

試試這個。這是從工作代碼中快速複製出來的。我剝去了很多東西給你一個更好的概述。也許它在這裏和那裏缺少一個括號,但它應該讓你知道要設置什麼以及受影響的變量。這確實是100%。

確保包含所需的Javascript庫以及。

如果您需要更多的細節,讓我知道...

<script type="text/javascript">(function($) { 
      var indizes; 
      var plot1; 
      $(document).ready(function() { 
       $(function() { 
        $(document).ready(function() { 
indizes = [["2011-12-31",0.00],["2012-01-31",6.25],["2012-02-28",12.56],["2012-03-31",17.62],["2012-04-30",18.72],["2012-05-31",12.44],["2012-06-30",15.14],["2012-07-31",20.27],["2012-08-31",20.82],["2012-09-30",24.47],["2012-10-31",25.68],["2012-11-30",26.41],["2012-12-31",28.43],["2013-01-31",32.76],["2013-02-28",36.82],["2013-03-31",42.29],["2013-04-30",43.14],["2013-05-31",45.87],["2013-06-30",40.68],["2013-07-31",50.58],["2013-08-31",46.00],["2013-09-29",56.20],["2013-10-02",55.40]];       ; 

      draw_first(); 

      function draw_first() { 
       plot1 = $.jqplot("chartdiv", [indizes], { 
        seriesColors: ["rgba(0, 189, 255, 1)"], 
        title: '', 
        grid: { 
         background: 'rgba(57,57,57,0.0)', 
         drawBorder: false, 
         shadow: false, 
         gridLineColor: '#333', 
         gridLineWidth: 1 
        }, 
        legend: { 
         show: true, 
         placement: 'inside', 
         location: 'nw' 
        }, 
        seriesDefaults: { 
         rendererOptions: { 
          smooth: false, 
          animation: { 
           show: true 
          } 
         }, 
         showMarker: true, 
         pointLabels: {show: pointlabels}, 
         markerOptions: { 
          style: 'filledSquare' 
         } 
        }, 
        series: [ 
         { 
          label: 'Indizes' 
         } 
        ], 
        axesDefaults: { 
         rendererOptions: { 
          baselineWidth: 2, 
          baselineColor: '#444444', 
          drawBaseline: false 
         } 
        }, 
        axes: { 
         xaxis: { 
          renderer: $.jqplot.DateAxisRenderer, 
          tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
          tickOptions: { 
           formatString: "%b", 
           angle: 0, 
           textColor: '#888' 
          }, 
          min: "2012-10-01", 
          max: "2013-10-31", 
          tickInterval: "1 month", 
          drawMajorGridlines: true 
         }, 
         yaxis: { 
          renderer: $.jqplot.LinearAxisRenderer, 
          pad: 0, 
          rendererOptions: { 
           minorTicks: 1 
          }, 
          drawMajorGridlines: false, 
          tickOptions: { 
           formatString: function() { 
            return '%#.1f %'; 
           }(), 
           showMark: false, 
           textColor: '#888' 
          } 
         } 
        } 
       }); 
      } 

     })(jQuery);</script>