html - JQPlot BarRenderer 日期不与图轴对齐

Question

我有 2 个图表，两个图表的 x 轴网格对齐，但如下图所示，下图中的条形图与 x 网格值不相关。当光标放在条形的最右侧时，它显示为(5 月 22 日)，但显示的是网格(6 月 1 日)，导致 10 天的视觉显示不准确。

请看这里的图片: https://drive.google.com/file/d/0B8yt1DOnKzVkRG5lNzFyM3M5MUk/edit?usp=sharing

3 多年前就提出了一个 bug，但看起来并没有解决。 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
                }

        });
    });

非常感谢。

Answer 1

最后，我使用了 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
                }

        });
    });