jqplot 차트를 Ajax 호출 데이터로 채우기

Question

3 개의 jqplot 차트가있는 레이아웃이 있으며,이를 Ajax 호출의 데이터로 채워야합니다.

데이터를 내 변수에 하드 코딩하면 차트가 잘 렌더링되지만 내 아약스 호출에서 반환 된 데이터를 사용하면 차트가 렌더링되지 않습니다.

왜 이런가요? 주와 월 플롯 보여이 코드와

var url = "ajax_loadplotdata.php"; 
var result; 

$.ajaxSetup({ async: false }); 

$.ajax({ 
cache: false, 
url: url, 
dataType: 'json', 
success: function(data) { 
result = data; 
}, 
}); 

var options = { 
height: 200, width: 300, 
axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, 
seriesDefaults: { rendererOptions: { smooth: true } }, 
axes: { xaxis: { min:1, max:30, tickInterval:1, pad:0, tickOptions:{fontFamily:'Arial', fontSize:'10px'} }, yaxis: { tickOptions:{show:false} } } 
}; 

var dayplot = result.daydata; 
var weekplot = [2,2,2,2,4,4,4,6,6,6,8,8,8,4,2]; 
var monthplot = [2,2,2,2,4,4,4,6,6,6,8,8,8,4,2]; 

var plot1 = $.jqplot('graph_day', [dayplot], options); 
var plot2 = $.jqplot('graph_week', [weekplot], options); 
var plot3 = $.jqplot('graph_month', [monthplot], options); 

plot1.replot({ resetAxes:false }); 
plot2.replot({ resetAxes:false }); 
plot3.replot({ resetAxes:false }); 

하지만 하루 플롯하지 않는 다음과 같이 jqplots를 렌더링

내 전체 코드입니다. 필자는 주 데이터와 월 변수를 샘플 데이터로 하드 코딩하여 테스트했습니다. 내 아약스 호출에서 반환

데이터는 다음과 같이이다 : 플롯 내가 수동으로 데이터를 입력,하지만 아약스 변수를 사용하지 않을 때 경우에 보여 왜

이

{"daydata":"[2.08E-8,2.08E-8,3.358E-7,3.258E-7,3.258E-7,3.308E-7,3.358E-7,3.408E-7,3.408E-7,1.808E-7,1.708E-7,3.158E-7,3.158E-7,3.158E-7,3.158E-7,3.158E-7,3.158E-7,3.158E-7,3.308E-7,1.108E-7,1.108E-7,1.108E-7,1.108E-7,1.158E-7]","weekdata":"[-2.304E-7,-2.304E-7,-2.304E-7,-2.304E-7,-2.304E-7,-2.304E-7,-2.304E-7]","monthdata":"[6.6E-7,2.55E-7,2.4E-7,4.7E-7,4.4E-7,5.8E-7,6.7E-7,6.3E-7,6.7E-7,7.75E-7,7.4E-7,7.5E-7,1.13E-6,7.2E-7,1.25E-6,1.42E-6,9.15E-7,2.2E-7,1.005E-6,2.06E-6,2.09E-6,1.59E-6,1.43E-6,1.19E-6,2.45E-6,2.49E-6,2.575E-6,2.755E-6,3.05E-6,2.84E-6]"} 

이해하지 못할.

Answer 1

왜이 기능이 작동하는지 설명 할 수는 없지만 제 기능을 두 개의 분리 된 기능으로 분리하면이 기능을 사용할 수 있습니다.

우선 함수 :

function ajaxCall(){ 

var url = "ajax_loadplotdata.php"; 
var result; 

$.ajaxSetup({ async: false }); 

$.ajax({ 
cache: false, 
url: url, 
dataType: 'json', 
success: function(data) { 
r = data; 
}, 
    complete: function(data) { 
    drawPlot(r[0],r[1],r[2],r[3],r[4],r[5],r[6],r[7],r[8],r[9],r[10],r[11],r[12],r[13],r[14],r[15],r[16],r[17],r[18],r[19],r[20]); 
    } 
}); 

} 

번째 함수 먼저 호출 :

function drawPlot(r0,r1,r2,r3,r4,r5,r6,r7,r8,r9,r10,r11,r12,r13,r14,r15,r16,r17,r18,r19,r20){ 

var options = { 
height: 200, width: 300, 
axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer }, 
seriesDefaults: { rendererOptions: { smooth: true } }, 
axes: { xaxis: { min:1, max:30, tickInterval:1, pad:0, tickOptions:{fontFamily:'Arial', fontSize:'10px'} }, yaxis: { tickOptions:{show:false} } } 
}; 

var plot1 = $.jqplot('graph_day', [r0,r1,r2,r3,r4,r5,r6,r7,r8,r9,r10,r11,r12,r13,r14,r15,r16,r17,r18,r19,r20], options); 
plot1.replot({ resetAxes:false }); 

}