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

loading chart from data fetched using ajax call

本文关键字：数据 加载 获取 ajax 调用      更新时间：2023-09-26

我使用jqPlot javascript库(http://www.jqplot.com/)在我的一个应用程序中的图形和图表。

在我的应用程序中，有5-6个页面使用了这个库。但我想在这里讨论一个特殊的情况。

在1页，我正在加载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>

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

在您的success函数中，您的JS代码(在浏览器上)接收来自服务器的数据。一旦你有了数据，调用$.jqplot——传入你刚刚收到的数据。

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

一些技巧:

  • 有些浏览器在运行js程序时不能很好地处理gif动画。所以你可能想尝试文本消息("Loading chart…")除了旋转的gif。——或者更新短信。例如从"从服务器获取图表数据"开始，然后在调用success函数后更新为"处理图表数据"。

  • 与其一次启动所有3个Ajax调用，不如尝试让第一个图表的success函数启动第二个Ajax调用。(除了图表数据)

如果你有Ajax调用的问题，谷歌的例子，问一个单独的问题，如果你仍然有问题。

相关文章：