javascript - 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. 请求成功后，使用响应数据调用渲染器
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();
});