Question

我在我的一个应用程序中使用jqPlot javascript库（http://www.jqplot.com/）来获取图形和图表。

在我的应用程序中，有5-6页使用此库。但我想在这里讨论一个特例。

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

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

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

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

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

这就是我打算做的事情：

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

加载页面后，它将一次启动3个ajax调用，以获取每个图表。

我的问题如何从ajax-call收到的数据中加载图表？

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 method来获取图表数据。

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

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

一些提示：

有些浏览器在运行js程序时处理动画gif效果不佳。因此，除了旋转的gif之外，您可能还想尝试短信（“加载图表...”）。 - 或更新短信。例如，从“从服务器获取图表数据”开始，然后在调用success函数后更新为“处理图表数据”。
不是一次启动所有3个Ajax调用，而是尝试使用第一个图表的success函数启动第二个Ajax调用。（除了绘制数据图表外。）

如果你的Ajax通话有问题，谷歌会举例说明，如果你还有问题，可以单独询问一下这个问题。

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

1 个答案: