JQPlot基础图表无法显示

6

我需要将数字数据显示为网页上的图表,我发现JQPlot看起来是最容易使用的JQuery库之一,而且还是免费的。然而,尽管我努力查看他们网页上的示例和教程,但我仍无法在页面上显示任何类型的图表。这是我的基本图表代码:

<html>

<head>
<title>Testing plots functions</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

</script>
</head>

<body>

Here is the start of the page...<br>

<div id="chart1"></div>

</body>

</html>

大部分代码都是直接从他们的示例网页(http://www.jqplot.com/tests/line-charts.php)中获取的,所以我不知道为什么页面上没有任何反应。
5个回答

2

在包含渲染器JS之前,您需要先包含主要的jqPlot JS,但在jQuery的包含之后,并且在放置用于渲染图表的脚本之前,需要将div位置放置在页面上。


2
这些文件是否存在于您的计算机上并位于此文件夹结构中?
  • JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js
  • JQPlot/plugins/jqplot.canvasTextRenderer.min.js
编辑:
请确保您还包括基本文件(jquery.jqplot.min.js),因为在这些页面上很容易忽略它。 http://www.jqplot.com/src/jquery.jqplot.min.js

我也会删除非压缩版本。 - Nathan Koop
1
这个图表在这个jsFiddle上对我来说显示得很好。包括了AWS存储桶中的所有渲染。 - Travis Pessetto
好的,我检查了你提供的Travis链接,它在我的电脑上也可以正常工作,所以问题可能与我调用这些文件的方式有关。Nathan - 为了确保,你是指要确保我在HTML头部调用那个脚本,对吗? - superspartan999
使用 Travis 的 jsFiddle,几乎可以确定一个或多个 js 文件没有正确加载。 - Nathan Koop
Natan - 就是这样!非常感谢你! - superspartan999
显示剩余3条评论

2
尝试将“div”组件放在Javascript/Jquery代码之前。
可能会出现Jquery无法定位“div”的情况。
先定义div,然后编写显示图表的代码。

0

虽然这个帖子有点旧,但请考虑以下内容:

在您想要显示绘图的网页中添加一个容器(目标)。确保为您的目标设置宽度和高度:

<div id="chartdiv" style="height:400px;width:300px; "></div>

(摘自此页面

这是我从你的代码中得到的第一印象。你没有正确定义容器。

希望能对某些人有所帮助。


0
一些额外的要点:
1:确保你已经按照 jqPlot 网站的顺序提供了所有必需的 JS 和 CSS 文件的链接。
2:在 Firebug 控制台中进行检查,有时它是有帮助的。
希望这可以帮到你。
谢谢!

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接