1

我正在使用 jqPlot “AJAX JSON 数据渲染器”，如下所述：http ://www.jqplot.com/tests/data-renderers.php 。
我的服务器端是 Spring MVC。在服务器上，我渲染了一个 Object[][] 矩阵，矩阵的每一行包含 2 个对象：[LocalTime.toString(“HH:mm”), Integer]。响应返回为“@ResponseBody”<p> 我可以看到数据是从服务器检索的，当我在警报中显示它时，我看到以下内容：

[["09:00",5],["09:30",5],["10:00",5],["10:30",5],["11:00",10],["11:30",10],["12:00",10],["12:30",10],["13:00",5]]

我也尝试使用List<List<Object>>而不是数组。我无法让它工作。我得到的只是一张空图表。这是javascript：

<script>
    $(document).ready(function(){
      var ajaxDataRenderer = function(url, plot, options) {
        var ret = null;
        $.ajax({
          async: false,
          url: url,
          dataType:"json",
          success: function(data) {
            ret = data;
          }
        });
        alert("OUT: " + ret);
        return ret;
      };
       var jsonurl = "chartData";

      var plot2 = $.jqplot('chart', jsonurl,{
        dataRenderer: ajaxDataRenderer,
        dataRendererOptions: {
          unusedOptionalUrl: jsonurl
        }
      });
    });
</script>

我在这里看到JSON for jqPlot每个人都建议构建一个字符串并解析它。这是唯一的方法吗？
我还查看了几个类似的问题，但找不到答案。
将不胜感激任何提示...</p>

4

2 回答 2

2

这个问题是很久以前提出的，所以我假设你现在已经继续前进了......但我也在寻找这个......并且刚刚找到了答案。嗯...一个答案。

问题是，当您输入日期时，您从 ajaxDataRenderer 传回的东西看起来不再像 json。我不知道为什么，但是如果您将 dataType 更改为文本，那么您的警报将输出数据。但是图表失败了，因为它没有设置为处理字符串。

所以....你使用 eval 来强制 js 将字符串转换为实际的数组，如下所示：

var ajaxDataRenderer = function(url, plot, options) {
     var ret = null;

     $.ajax({
      // have to use synchronous here, else the function
      // will return before the data is fetched
      async: false,
      url: url,
      dataType:"text",
      success: function(data) {
          ret = data;
          }
    });

    //clear out the loading message from the div
    $('#chartdiv').empty();
    //evaluate the returned string...to turn it into the data structure.
    return eval(ret);
};

无论如何，这对我有用。然后我让我的 url 返回代表数据的文本。

希望这可以帮助其他人寻找答案！

于 2012-07-17T15:34:42.600 回答
0

此示例 jsfiddle 显示了在您的情况下进入绘图的数据应该是什么样子。

由于您在 x 轴上使用时间（日期），因此您必须告诉图表如何呈现它，并且没有比使用DateAxisRenderer. 下面的代码（也在示例中）显示了它是如何完成的：

    axes: {
        xaxis: {
            label: "x label",
            renderer: $.jqplot.DateAxisRenderer,
            tickOptions:{formatString:'%H:%M'}
        }
    }
于 2012-05-11T08:19:35.677 回答