2013-11-27 119 views
0

我有2個圖形,兩個圖形的x軸網格對齊,但你可以在下面的圖片中看到,在下面的圖,條形圖不相關的X網格值。當光標放在條的最右側時(5月22日),但網格正在顯示(6月1日),使得視覺顯示10天不準確。JQPlot BarRenderer期不與圖軸對齊

見的形象在這裏: https://drive.google.com/file/d/0B8yt1DOnKzVkRG5lNzFyM3M5MUk/edit?usp=sharing

用於此bug已超過3年前提出,但看起來並不像它已經解決了。 Link to Bug我想知道是否有人有解決方法?

代碼頂級情節是這樣的: $(文件)。就緒(函數(){

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

代碼的底部曲線(沒有正確對齊的)看起來是這樣的: $ (文件)。就緒(函數(){

 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

最後,我用的OHLCRenderer,得到它的行爲像BarRenderer通過將較低的值設置爲零,並將較高的值設置爲已經輸入到BarRenderer中並設置身體寬度的值。

代碼爲上圖現在看起來是這樣的:

$(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 
      } 
     }); 
    }); 

代碼的底部曲線(現在正確對齊)看起來是這樣的:

$(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 
       } 

     }); 
    });