我有2个图形，两个图形的x轴网格对齐但是如下图所示，下图中的条形图与x网格值不相关。当光标位于条形图的最右侧时（5月22日），但网格显示（6月1日），使视觉显示10天不准确。
见图片： https://drive.google.com/file/d/0B8yt1DOnKzVkRG5lNzFyM3M5MUk/edit?usp=sharing
3年前已经提出了一个错误，但看起来并没有得到解决。 Link to Bug我想知道是否有人有解决方法？
顶部图的代码如下所示： $（document）.ready（function（）{
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
}
});
});
底部图的代码（未正确对齐的代码）如下所示： $（document）.ready（function（）{
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 :(得分：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
}
});
});