2012-10-09 3 views
0

저는 jqplot을 처음 사용했지만 매우 중요한 프로젝트에서 사용하고 있습니다. 나는 x 축에 매일 하나의 '진드기'를 갖기 위해 노력하고있다. 지금은 여러 개의 것이있다.jqPlot의 tickInterval 관련 문제

$(document).ready(function(){ 

          var ajaxDataRenderer = function(url, plot, options) { 
           var ret = null; 
           $.ajax({ 
            async: false, 
            url: url, 
            type: "GET", 
            dataType:"json", 
            data: {metricName: ""}, 
            success: function(data) { 
             ret = data; 
            }, 
            error:function (xhr, ajaxOptions, thrownError){ 
             alert(xhr.responseText); 
            }  
           }); 
           return ret; 
          }; 

          //var jsonurl = "reports/reportData.json"; 
          var jsonurl = "tenant/metrics/get.json"; 

          var today = new Date(); 

          var plot2 = $.jqplot('chart2', jsonurl,{ 
           title: "", 
           dataRenderer: ajaxDataRenderer, 
           dataRendererOptions: {unusedOptionalUrl: jsonurl}, 
           axes: { 
            xaxis: { 
             'numberTicks' : 7, 
             min: '2012-10-05', 
             max: today, 
             renderer:$.jqplot.DateAxisRenderer, 
             rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer}, 
             tickInterval: '1 day', 
             tickOptions:{formatString:'%Y-%#m-%#d' 

             } 
             //rendererOptions: {sdaTickInterval: [1, 'month']} 

            }, 
            yaxis: { 
             label: "MB", 
             tickOptions:{formatString:'%d '}, 
             // Comment the next line out to allow negative values (and therefore rounded ones) 
             min: 0 
            } 
           } 
          }); 
         }); 

I 수동 이런 클릭 수를 설정하더라도 :

여기 enter image description here

는 (여기서 I는 this post referred 같은 최소 및 최대를 첨가) 코드이다 : 여기서 스크린 샷이다

$(document).ready(function(){ 

          var ajaxDataRenderer = function(url, plot, options) { 
           var ret = null; 
           $.ajax({ 
            async: false, 
            url: url, 
            type: "GET", 
            dataType:"json", 
            data: {metricName: ""}, 
            success: function(data) { 
             ret = data; 
            }, 
            error:function (xhr, ajaxOptions, thrownError){ 
             alert(xhr.responseText); 
            }  
           }); 
           return ret; 
          }; 

          //var jsonurl = "reports/reportData.json"; 
          var jsonurl = "tenant/metrics/get.json"; 

          var today = new Date(); 

          var plot2 = $.jqplot('chart2', jsonurl,{ 
           title: "", 
           dataRenderer: ajaxDataRenderer, 
           dataRendererOptions: {unusedOptionalUrl: jsonurl}, 
           axes: { 
            xaxis: { 
             'numberTicks' : 7, 
             min: '2012-10-05', 
             max: today, 
             renderer:$.jqplot.DateAxisRenderer, 
             rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer}, 
             ticks: ['2012-10-05','2012-10-06','2012-10-07','2012-10-08', today], 
             tickOptions:{formatString:'%Y-%#m-%#d' 

             } 
             //rendererOptions: {sdaTickInterval: [1, 'month']} 

            }, 
            yaxis: { 
             label: "MB", 
             tickOptions:{formatString:'%d '}, 
             // Comment the next line out to allow negative values (and therefore rounded ones) 
             min: 0 
            } 
           } 
          }); 
         }); 

마크가 올바른 날짜와 일치하지 않습니다. 스크린 샷은 다음과 같습니다. enter image description here

이렇게하려면 정상적인 방법이 있습니까? 나는 각 x 축 틱이 단지 하나의 날짜가되고 데이터 입력 마크가 틱의 축에 있도록하고 싶다.

이것은 나를 미치게합니다! 도와주세요! 또한

, 여기가 타임 스탬프를 포함하지 않는

[[["2012-10-05 10:57:16AM", 0],["2012-10-05 11:02:14AM", 2449],["2012-10-08 08:17:47AM", 9639],["2012-10-08 08:17:53AM", 224768],["2012-10-09 07:43:19AM", 9640],["2012-10-09 07:44:01AM", 224769]]] 
+0

JSON을 게시 할 수 있습니까? 나는 당신의 문제가 거기 누워 있을지도 모른다고 내기를했습니다. – dSquared

+0

예! 지금 당장 할거야. – streetlight

+0

방금 ​​게시했습니다. 그것은 전혀 도움이됩니까? 어쩌면 타임 스탬프가 그걸 버리고있을거야? – streetlight

답변

1

귀하의 형식 문자열이 올바르지 않습니다 내 JSON이다; 다음로 변경합니다 :

tickOptions:{formatString:'%y-%#m-%#d%n%#I:%#M:%#S%p} 

을 다른 방법으로는, 타임 스탬프를 필요로하는 JSON에서 타임 스탬프를 같이 귀하의 형식 문자열을두고 제거하지 않는 경우.

편집

위의 형식 문자열이 작동하지 않는 경우, 다음과 같이 값을 사용하여 일치하는 값을 조작하려고 :

// Year 
%Y 2008 
%y 08 

// Month 
%m 09 
%#m 9 
%B September 
%b Sep 

// Day 
%d 05 
%#d 5 
%e 5 
%A Sunday 
%a Sun 
%w 0, 0 = Sunday, 6 = Saturday 
%o th, The ordinal suffix string following the day of the month 

// Hour 
%H 23 
%#H 3 
%I 11 
%#I 3 
%p PM, AM or PM 

// Minute 
%M 09 
%#M 9 

// Second 
%S 02 
%#S 2 
%s 1206567625723, Unix timestamp, seconds past 1970-01-01 00:00:00 

// Millisecond 
%N 008 
%#N 8 

난이 도움이되기를 바랍니다!

+0

이것은 대단히 도움이되었고, 올바른 길로 나를 보내 셨습니다! 주요 이슈는 타임 스탬프가 특정 날짜에 그리기를 원했기 때문에 일정한 의미에서 그리드가 너무 정확하다는 사실이었습니다. 그래서 타임 스탬프가 들어오는 JSON에 없도록 서버 측/JSON에서 변경해야하고 타임 스탬프를 포함하지 않도록 JS의 최대/최소 날짜를 변경해야합니다. 모든 도움에 감사드립니다! – streetlight