从使用 ajax 调用获取的数据加载图表

Question

我正在使用 jqPlot javascript 库（ http://www.jqplot.com/ ）将图形和图表合二为一我的申请。

在我的应用程序中，有 5-6 个页面使用了该库。但我想在这里讨论一个具体案例。

在第 1 页上，我正在加载 3 个图表。这 3 个图表的数据是从数据库表中填充的。

每个图表都有不同的查询集。因此，每个图表的填充数据也不同。

填充数据后，我必须在将其输入提供给图表之前对其进行处理。

那么问题是什么： 我面临的问题是页面在浏览器上渲染需要花费大量时间（这很明显，因为首先它将形成查询，然后针对数据库表触发查询，获取数据，处理数据并提供给图表）

我的一位朋友建议使用 ajax 来实现以下内容。我真的很喜欢他的解决方案。

这就是我打算做的：

我将创建一个页面，它将加载 jqPlot 库所需的所有 js/css 文件。 该页面上将有 3 个部分，我将在其中放置一些 GIF 图像，指示某些进程正在进行（例如 ajax-loader.gif）。

一旦页面加载，它将触发 3 个 ajax 调用，一次一个，以获取每个图表。

我的问题是如何从ajax调用收到的数据加载图表？

jqplot 按以下方式放置数据并创建图表（请看下面的示例）

<script class="code" type="text/javascript"> 
$(document).ready(function(){
  var plot2 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], {
      // Give the plot a title.
      title: 'Plot With Options',
      // You can specify options for all axes on the plot at once with
      // the axesDefaults object.  Here, we're using a canvas renderer
      // to draw the axis label which allows rotated text.
      axesDefaults: {
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
      },
      // An axes object holds options for all axes.
      // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
      // Up to 9 y axes are supported.
      axes: {
        // options for each axis are specified in seperate option objects.
        xaxis: {
          label: "X Axis",
          // Turn off "padding".  This will allow data point to lie on the
          // edges of the grid.  Default padding is 1.2 and will keep all
          // points inside the bounds of the grid.
          pad: 0
        },
        yaxis: {
          label: "Y Axis" 
        }
      }
    });
});
</script> 

Answer 1

由于您使用的是 jQuery，因此您可以使用 jQuery Ajax 方法 来获取图表数据页面加载后。

在您的 success 函数中，您的 JS 代码（在浏览器上）从服务器接收数据。获得数据后，调用 $.jqplot ——传入您刚刚收到的数据。

要最初显示繁忙的 gif，只需使用 img 元素作为 chart2 div 的静态内容，该 div 稍后将成为图形的容器。

一些提示：

• 某些浏览器在运行 js 程序时不能很好地处理动画 gif。因此，除了旋转 gif 之外，您可能还想尝试短信（“正在加载图表...”）。 -- 或者更新短信。例如，从“从服务器获取图表数据”开始，然后在调用 success 函数后更新为“处理图表数据”。

• 不要同时启动所有 3 个 Ajax 调用，而是尝试为第一个图表使用 success 函数来启动第二个 Ajax 调用。 （除了绘制数据图表之外。）

如果您的 Ajax 调用有问题，请搜索 Google 示例，如果仍然有问题，请就 SO 提出单独的问题。