我正在尝试运行 jqPlot 中的示例。我将他们的代码调整为我的页面:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Tests</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div>Testing a chart 2</div>
<script type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.pointLabels.min.js"></script>
<script language=javascript type="text/javascript">
$(document).ready(function() {
var s1 = [200, 600, 700, 1000];
var s2 = [460, -210, 690, 820];
var s3 = [-260, -440, 320, 200];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = ['May', 'June', 'July', 'August'];
var plot1 = $.jqplot('chart1', [s1, s2, s3], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
},
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series: [
{label: 'Hotel'},
{label: 'Event Regristration'},
{label: 'Airfare'}
],
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
pad: 1.05,
tickOptions: {formatString: '$%d'}
}
}
});
});
</script>
<div id="chart1" style="height:400px;width:300px; "></div>
<br><a href="/Test/index.html">Home</a>
</body>
</html>
请注意，我使用图表名称 chart1 创建了 div，然后相应地添加了插件。
最佳答案
您需要添加主“jqplot”javascript 文件，而不仅仅是插件文件:
<script type="text/javascript" src="jquery.jqplot.js"></script>
请参阅工作示例 here
PS:关于您的 Chart2.html 文件(在您的存档中)
- 您必须按照精确的顺序加载文件:首先是 jquery，然后是 jqplot，最后是 jqlot 插件(它们之间没有任何特定的顺序)。
- 您拼错了 jqplot 文件:jquery.jqplot.min.js(不要忘记“q”字母)
- 您不需要同时加载 jquery.jqplot.min.js 和 jquery.jqplot.js，因为它们是相同的内容(区别在于缩小)。
- 如果您希望图表良好显示，请不要忘记加载 jqplot CSS。
因此正确的 javascript 和 css 包含是:
<script src="jquery.min.js"></script>
<script src="jquery.jqplot.min.js"></script>
<script src="jqplot.barRenderer.min.js"></script>
<script src="jqplot.categoryAxisRenderer.min.js"></script>
<script src="jqplot.pointLabels.min.js"></script>
<link href="jquery.jqplot.css" rel="stylesheet" type="text/css">
关于javascript - 如何使 jqPlot 与条形图示例一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21667444/