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

我正在我的一个应用程序中使用jqPlot javascript库（）处理图形和图表

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

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

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

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

那么问题出在哪里： 我面临的问题是，页面在浏览器上呈现需要花费大量时间（这一点很明显，因为首先它将形成查询，然后对数据库表进行查询，获取数据，处理数据，并将其提交给图表）

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

这就是我打算做的：

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

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

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

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

$（文档）.ready（函数（）{
变量plot2=$.jqplot（'chart2'，[[3,7,9,1,4,6,8,2,5]]{
//给情节一个标题。
标题：“带选项的绘图”，
//可以使用一次指定绘图上所有轴的选项
//axesDefaults对象。这里，我们使用的是画布渲染器
//绘制允许旋转文本的轴标签。
axesDefaults：{
labelRenderer:$.jqplot.CanvasAxisLabelRenderer
},
//轴对象包含所有轴的选项。
//允许的轴包括X轴、X2轴、Y轴、Y2轴、Y3轴等。。。
//最多支持9个y轴。
轴线：{
//每个轴的选项在单独的选项对象中指定。
xaxis：{
标签：“X轴”，
//关闭“填充”。这将允许数据点位于
//网格的边缘。默认填充为1.2，将保留所有
//网格边界内的点。
pad:0
},
亚克斯：{
标签：“Y轴”
}
}
});
});

因为您使用的是jQuery，所以在加载页面后，您可以使用获取图表数据

在

success

函数中，JS代码（在浏览器上）从服务器接收数据。获得数据后，调用

$.jqplot

——传入刚收到的数据

要开始显示繁忙的gif，只需使用img元素作为

chart2

div的静态内容，该div稍后将成为图形的容器

一些提示：

• 一些浏览器在运行js程序时无法很好地处理动画gif。因此，除了旋转gif，您可能还想尝试发送一条文本消息（“加载图表…”）或者更新短信。例如，从“从服务器获取图表数据”开始，然后在调用

  success

  函数后更新为“处理图表数据”

• 不要同时启动所有3个Ajax调用，而是尝试为第一个图表使用

  success

  函数启动第二个Ajax调用。（除此之外，还可以绘制数据图表。）

---

如果您的Ajax调用有问题，请以谷歌为例，单独询问一个问题，如果您仍然有问题。

这只是另一个想法（这不是一个解决方案，只是一个想法，如果我没有想法的话，我会怎么做），我会使用一个php端库，将图形呈现为图片。包含的图像将在页面后加载，不需要任何javascript（有利于向后兼容性），您可以在任何地方包含图形。记住：如果答案解决了您的问题，请单击答案旁边的复选标记“接受”答案。如果你发现一个有帮助的答案（包括对其他人的问题的答案），那么点击“加号”箭头获得答案。嘿，你把加载器放在jqplot中了吗？？？你能帮我一下吗…我想把ajax加载器放在unitll图表中，图表中满是数据。我还有一些疑问。根据您的回答，一旦我有了数据，我必须打电话到$jqplot。$.jqplot的第一个参数是元素名（在我的例子中是div元素），如果您再次检查有问题的示例，您可以看到元素名为“chart2”。我应该在页面上已经有该元素，还是可以动态添加。您可以动态添加container元素，也可以在页面开始时使用container元素（div）。如果您已经知道页面将始终包含3个图表，那么只需在开始的html页面中使用div就可以了，这样更容易了。此外，将反馈消息（“加载”）放在容器元素中也更容易了。这样，一旦显示图表，图表库将自动删除加载消息。（如果没有，则在显示图表后，将加载消息更改为“显示：无”。）

<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>