使用来自 Ajax 调用的数据填充 jqplot 图表

Question

我有一个包含 3 个 jqplot 图表的布局，我需要用来自 ajax 调用的数据填充这些图表。

如果我将数据硬编码到我的变量中，图表可以正常呈现，但是当我使用从 ajax 调用返回的数据时，图表不会呈现。

这是为什么？

我渲染 jqplots 的完整代码如下：

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

使用此代码，显示周图和月图，但不显示日图。我将示例数据硬编码到周和月变量中作为测试。

我的 ajax 调用返回的数据是这样的：

{"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]"}

我无法理解为什么如果我手动填写数据，图表会显示，但当我使用 ajax 变量时却不会。

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

}

使用来自 Ajax 调用的数据填充 jqplot 图表

Filling jqplot charts with data from an Ajax call

javascript

ajax

jquery

jqplot