jqPlot Chart – 不显示 ajax 数据

Question

我正在使用 jqPlot “AJAX JSON 数据渲染器”，如：http://www.jqplot.com/tests/data-renderers.php 中所述。
我的服务器端是 Spring MVC。在服务器上，我渲染了一个 Object[][] 矩阵，矩阵的每一行包含 2 个对象：[LocalTime.toString(“HH:mm”), Integer]。响应返回为“@ResponseBody”

我可以看到数据是从服务器检索的，当我在警报中显示它时，我看到以下内容：

[["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，每个人都建议构建一个字符串并解析它。这是唯一的方法吗？
我还查看了几个类似的问题，但找不到答案。
将不胜感激任何提示...

Answer 1

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

问题是当您输入日期时，您从 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 返回代表数据的文本。

希望这可以帮助其他人寻找这个问题的答案！

Answer 2

This sample jsfiddle shows 在您的情况下，进入绘图的数据应该是什么样子。

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

    axes: {
        xaxis: {
            label: "x label",
            renderer: $.jqplot.DateAxisRenderer,
            tickOptions:{formatString:'%H:%M'}
        }
    }