AJAX装载到jqPlot

Question

我需要使用与数据数组的jqPlot图表像

[[2010-06-30 18:40:11, 18], [2010-06-30 18:42:17, 25]...] 

它与官方的例子的伟大工程“dateAxisRenderer插件”

，但现在我需要做ajax加载的图表。在我看来，“AJAX JSON数据呈现器”方法不能将日期用作“x”数据源，只能从简单的[y1，y2，y3]数组中取得“y”值。我怎么能让他从我的数组中取出两个同心 - 日期为“x”，数字为“y”？ JSON示例：

$(document).ready(function(){ 
var ajaxDataRenderer = function(url, plot, options) { 
var ret = null; 
$.ajax({ 
    async: false, 
    url: url, 
    dataType:"json", 
    success: function(data) { 
    ret = data; 
    }} 
); 
return ret; 
}; 

var jsonurl = "jsondata.php"; 

var plot2 = $.jqplot('chart2', jsonurl,{ 
    title: "AJAX JSON Data Renderer", 
    dataRenderer: ajaxDataRenderer, 
    dataRendererOptions: { 
    unusedOptionalUrl: jsonurl 
    } 
    }); 
}); 

谢谢。

Answer 1

你的代码中的基本问题是渲染器没有返回从ajax请求收到的响应。成功函数调用返回后设置变量。

看看下面的代码。执行

步骤：

1. 呼叫在页面载入plot功能
2. 就请求成功Ajax请求
3. 调用renderer响应数据
4. 通话jqplot与参数形成响应数据。
5. 图形渲染

---

var ajaxJqPlot = { 
    settings : { 
     data_url : "jsondata.php", 
     element_id : "chart2" 
    }, 
    plot : function(settings){ 
     t = this; 
     $.extend(t.settings, settings); 
     $.ajax({ 
      async : false, 
      url : t.settings.data_url, 
      dataType :"json", 
      success : t.renderer 
     }); 
    }, 
    renderer : function(res){ 
     t = this; 
     $.jqplot(t.settings.element_id, res.data, res.opt); 
    } 
}; 

$(document).ready(function(){ 
    ajaxJqPlot.plot(); 
});