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
}
});
});
많은 감사합니다.