jqplot日付軸からのタイムスタンプ

Question

私は、日付のx軸を取得しようとしています。 xデータはタイムスタンプです。どういうわけか私はそれを正しくすることはできません。

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ラベルとして表示されます。

ラインは次のような値を持っています。 私は多くのバリエーションを試しましたが、それを得ることはできません。

Answer 1

ここに行く。 問題はtickRenderer: $.jqplot.CanvasAxisTickRendererがrendererと同じレベルにあり、rendererOptionsの内部にないことです。

Please see the jsfiddle.

EDIT

また、あなたはどのCanvasTextRendererCanvasAxisTickRenderer用途の輸入が欠落している、あなたはそうのように、大文字Cで始めることを忘れ：$.jqplot.CanvasAxisTickRenderer。

Answer 2

これを試してください。これは、作業コードから急いでコピーされます。私はあなたに良い概観を与えるために多くを取り除いた。おそらく、ここには括弧がないかもしれませんが、設定すべきものとその影響を受ける変数の考え方を与えるべきです。これは確かに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>