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

I am using jqPlot javascript library ( http://www.jqplot.com/ ) for graphs and charts in one of my application.

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

In my application, there are 5-6 pages where this library is used. But I would like to discuss one particular case here.

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

On 1 of page, I am loading 3 charts. Data for these 3 charts is populated from database tables.

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

There is different set of queries for each chart. So, populated data for each chart is different too.

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

Once I have populated data, I have to process it, before providing its input to chart.

一旦我填充了数据，我必须先处理它，然后再将其输入提供给图表。

What is the problem then: Problem that I am facing is it takes lots of time for page to render on browser (which is quiet obvious, as first it will form query, then fire that query against database tables, get the data, process on data and give to chart)

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

One of my friend suggested to implement following thing using ajax. I really liked his solution.

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

This is what I intend to do:

这就是我打算做的事情：

I would create a page, which will load all the required js/css files for jqPlot library. There will be 3 sections on that page, where I would put some GIF images indicating that some process is going on (say ajax-loader.gif)

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

Once page is loaded, it will fire 3 ajax call, one at a time, to fetch each chart.

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

My Question Is how can I load chart from data received from ajax-call?

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

jqplot puts data and creates chart in following way (look at example below)

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>

1 个解决方案

#1

Since you're using jQuery, you'd use the jQuery Ajax method to fetch the chart data after the page has loaded.

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

In your success function, your JS code (on the browser) receives the data from your server. Once you have the data, make the call to $.jqplot -- passing in the data you've just received.

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

To initially show the busy gif, just use the img element as the static content of the chart2 div which will later be the graph's container.

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

Some tips:

一些技巧：

Some browsers don't do well at handling an animated gif while running a js program. So you may want to try a text message ("Loading chart...") in addition to the rotating gif. -- Or update the text messages. Eg start with "Fetching chart data from server" then update to "Processing chart data" once your success function has been called.

有些浏览器在运行js程序时处理动画gif效果不佳。因此，除了旋转的gif之外，您可能还想尝试短信（“加载图表...”）。 - 或更新短信。例如，从“从服务器获取图表数据”开始，然后在调用成功函数后更新为“处理图表数据”。
Rather than starting all 3 Ajax calls at once, experiment with having the success function for the first chart initiating the second Ajax call. (In addition to it charting the data.)

而不是一次启动所有3个Ajax调用，尝试使用第一个图表启动第二个Ajax调用的成功函数。（除了绘制数据图表外。）

If you have problems with your Ajax calls, Google for examples and ask a separate question on SO if you still have problems.

如果您的Ajax呼叫有问题，可以使用Google作为示例，如果仍有问题，请在SO上单独提问。

#1