2013-11-27 2 views
0

2 개의 그래프가 있습니다. 두 그래프의 x 축 눈금이 정렬되지만 아래 그림에서 볼 수 있듯이 낮은 그림의 막대 그래프는 x 눈금 값과 상관 관계가 없습니다 . 커서가 막대의 맨 오른쪽에 놓이면 (5 월 22 일) 읽지 만 그리드가 표시됨 (6 월 1 일) 시각적 표시가 10 일 정확하지 않게됩니다. 여기JQPlot BarRenderer 날짜가 그래프 축과 일치하지 않습니다

참조 이미지 : https://drive.google.com/file/d/0B8yt1DOnKzVkRG5lNzFyM3M5MUk/edit?usp=sharing

이에 대한 버그가 3 년 이상 전에 제기되었지만 해결되었습니다 그것처럼 보이지 않는다. Link to Bug 그리고 누구나 해결 방법이 있는지 궁금합니다. $ (문서) .ready가 (함수() {

 pregnancyPlot = $.jqplot('pregnancyGraph', [[['2013-01-20 16:57',123,156,123,156],['2013-03-22 17:05',69,130,69,130],['2013-05-22 17:05',69,130,69,130],['2013-07-20 15:26',110,180,110,180],['2013-08-01 15:27',120,80,120,80],['2013-09-20 15:14',120,60,120,60],['2013-11-22 17:14',107,161,107,161],['2013-11-26 12:30',106,180,106,180]], [['2013-01-20 16:57',123],['2013-03-22 17:05',90],['2013-05-22 17:05',90],['2013-07-20 15:26',67],['2013-08-01 15:27',101],['2013-09-20 15:14',67],['2013-11-22 17:14',58],['2013-11-26 12:30',123]],[['2013-01-20 16:57', 83.40],['2013-03-22 17:05', 75.00],['2013-05-22 17:05', 75.00],['2013-08-01 15:27', 103.00],['2013-09-20 15:14', 102.00],['2013-11-22 17:14', 98.00],['2013-11-26 12:30', 200.00]], [['2013-01-20 16:57', 2.50, 4],['2013-03-22 17:05', 4.00, 4],['2013-05-22 17:05', 4.00, 4],['2013-09-20 15:14', 2.50, 4],['2013-11-22 17:14', 2.70, 4],['2013-11-26 12:30', 2.50, 4]]], { 
      title:'Pregnancy Readings', 
      height: 300, 
      width: 600, 
      gridPadding: {top:20, bottom:0, left:80, right:0}, 
      series: [  
         {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true, fillUpBody:true, fillDownBody:true, bodyWidth:4}, color:'red', label: 'B.P'}, 
         {renderer:$.jqplot.LineRenderer, color: 'black', label: 'Pulse'}, 
         {renderer:$.jqplot.LineRenderer, showLine:false, markerOptions: { style:'filledDiamond', size:'15' }, color: '#00006B', label: 'Weight'}, 
         {renderer:$.jqplot.BubbleRenderer, yaxis:'y2axis', rendererOptions: {autoscaleBubbles: false, varyBubbleColors: false}, color: '#FFA319', label: 'SF Height'} 
        ], 


      axesDefaults:{ 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
       tickOptions: { 
        angle: -30, 
        fontSize: '10pt', 
        showMark: false, 
       } 
      }, 

      axes: { 
       xaxis: { 
        autoscale:false, 
        renderer:$.jqplot.DateAxisRenderer, 
        showTicks: false, 
        }, 

       yaxis:{ 
        autoscale:false, 
        renderer: $.jqplot.LinearAxisRenderer 
       }, 
       y2axis:{ 
        autoscale:true, 
        label: 'SF Height', 
        renderer: $.jqplot.LinearAxisRenderer, 
        rendererOptions: { 
         alignTicks: true, 
        } 
       }, 

      }, 

      legend: { 
       show: true, 
       placement: 'outside', 
       location: 'nw' 
      }, 

      highlighter: { 
       show: true, 
       showMarker: false, 
       sizeAdjust: 7.5, 
       yvalues: 2, 
      }, 

      cursor: { 
       show: true, 
       zoom: true 
      } 
     }); 
    }); 

코드 하단 플롯 (안 올바르게 정렬 한)에 대해 다음과 같습니다 : $를 상단 플롯에 대한

코드는 다음과 같습니다 (문서) .ready (함수() {

 urinePlot = $.jqplot('urineGraph', [[['2013-01-20', 50 ],['2013-07-20', 50 ],['2013-09-20', 50 ]], [['2013-03-22', 50 ],['2013-05-22', 50 ],['2013-11-22', 50 ],['2013-11-26', 50 ]]], { 
      height: 100, 
      width: 600, 
      gridPadding: {top:0, bottom:60, left:80, right:0}, 
      series: [  
         {renderer:$.jqplot.BarRenderer, rendererOptions: {fillToZero: true, barWidth: 15}, color: 'green', label: 'Unine Normal'}, 
         {renderer:$.jqplot.BarRenderer, rendererOptions: {fillToZero: true, barWidth: 15}, color: 'red', label: 'Unine Abnormal'} 
        ], 

       axesDefaults:{ 
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
        tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
        tickOptions: { 
         angle: -30, 
         fontSize: '10pt', 
         showMark: false, 
        } 
       }, 

      axes: {  

       xaxis: { 
        autoscale:false, 
        label: '', 
        renderer:$.jqplot.DateAxisRenderer, 
        tickOptions:{ 
         formatString:'%d %b %Y' 
        } 
        }, 

       yaxis:{ 
         renderer: $.jqplot.LinearAxisRenderer, 
         showTicks: false, 
        }, 
      }, 

      highlighter: { 
        show: true, 
        showMarker: false, 
        sizeAdjust: 7.5 
       }, 

      legend: { 
        show: true, 
        placement: 'outside', 
        location: 'nw' 
       }, 

      cursor: { 
        show: true, 
        zoom: true 
       } 

     }); 
    }); 

많은 감사합니다.

답변

0

결국은 내가 BarRenderer처럼 행동하는 OHLCRenderer를 사용하고있어 낮은 값을 0으로 설정하고 위쪽 값을 BarRenderer에 입력 한 값으로 설정하고 본문 너비를 설정합니다. 상단 플롯

코드는 이제 다음과 같습니다

$(document).ready(function() { 

     urinePlot = $.jqplot('urineGraph', [[['2013-12-01 10:36', 0,50,0,50]], [['2013-12-08 17:16', 0,50,0,50]]], { 
      height: 100, 
      width: 600, 
      gridPadding: {top:0, bottom:60, left:80, right:0}, 
      series: [  
         {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true, fillUpBody:true, fillDownBody:true, bodyWidth:15}, color: 'green', label: 'Urine Normal'}, 
         {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true, fillUpBody:true, fillDownBody:true, bodyWidth:15}, color: 'red', label: 'Urine Abnormal'} 
        ], 

       axesDefaults:{ 
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
        tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
        tickOptions: { 
         angle: -30, 
         fontSize: '10pt', 
         showMark: false, 
        } 
       }, 

      axes: {  

       xaxis: { 
        min:'2013-11-28', 
        max:'2013-12-11', 
        label: '', 
        renderer:$.jqplot.DateAxisRenderer, 
        tickOptions:{ 
         formatString:'%d %b %Y' 
        } 
        }, 

       yaxis:{ 
         min:0, 
         max:50, 
         renderer: $.jqplot.LinearAxisRenderer, 
         showTicks: false, 
        }, 
      }, 

      highlighter: { 
        show: true, 
        showMarker: false, 
        sizeAdjust: 7.5 
       }, 

      legend: { 
        show: true, 
        placement: 'outside', 
        location: 'nw' 
       }, 

      cursor: { 
        show: true, 
        zoom: true 
       } 

     }); 
    }); 
: 하단 플롯 (이제 올바르게 정렬)에 대한
$(document).ready(function() { 

     pregnancyPlot = $.jqplot('pregnancyGraph', [[['2013-12-01 10:36',110,180,110,180],['2013-12-08 17:16',80,185,80,185]], [['2013-12-01 10:36',123],['2013-12-08 17:16',67]],[['2013-12-01 10:36', 105.00],['2013-12-08 17:16', 105.00]], [['2013-12-01 10:36', 2.50, 4],['2013-12-08 17:16', 2.70, 4]]], { 
      title:'Pregnancy Readings', 
      height: 300, 
      width: 600, 
      gridPadding: {top:20, bottom:0, left:80, right:0}, 
      series: [  
         {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true, fillUpBody:true, fillDownBody:true, bodyWidth:4}, color:'red', label: 'B.P'}, 
         {renderer:$.jqplot.LineRenderer, color: 'black', label: 'Pulse'}, 
         {renderer:$.jqplot.LineRenderer, showLine:false, markerOptions: { style:'filledDiamond', size:'15' }, color: '#00006B', label: 'Weight'}, 
         {renderer:$.jqplot.BubbleRenderer, yaxis:'y2axis', rendererOptions: {autoscaleBubbles: false, varyBubbleColors: false}, color: '#FFA319', label: 'SF Height'} 
        ], 


      axesDefaults:{ 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
       tickOptions: { 
        angle: -30, 
        fontSize: '10pt', 
        showMark: false, 
       } 
      }, 

      axes: { 
       xaxis: { 
        min:'2013-11-28', 
        max:'2013-12-11', 
        renderer:$.jqplot.DateAxisRenderer, 
        showTicks: false, 
        }, 

       yaxis:{ 
        autoscale:false, 
        renderer: $.jqplot.LinearAxisRenderer 
       }, 
       y2axis:{ 
        autoscale:true, 
        label: 'SF Height', 
        renderer: $.jqplot.LinearAxisRenderer, 
        rendererOptions: { 
         alignTicks: true, 
        } 
       }, 

      }, 

      legend: { 
       show: true, 
       placement: 'outside', 
       location: 'nw' 
      }, 

      highlighter: { 
       show: true, 
       showMarker: false, 
       sizeAdjust: 7.5, 
       yvalues: 2, 
      }, 

      cursor: { 
       show: true, 
       zoom: true 
      } 
     }); 
    }); 

코드는 다음과 같습니다