FireBug 显示以下错误消息var plot1：
类型错误：$.jqplot 未定义
渲染器：$.jqplot.DateAxisRenderer，
如何修复此错误？
<script>
$(document).ready(function() {
document.getElementById('container1').innerHTML = "";
document.getElementById('container2').innerHTML = "";
show_data();
});
function show_data() {
$.getJSON(
'h_index.php?module=mod_data&pag_mod=getData.php',
function(data) {
var ignOnStyle = {
color: "#00FF00",
showMarker:false,
pointLabels: {location: 'n'},
lineWidth: 7,
markerOptions: {
style: "filledCircle",
size: 12,
}
};
var line = {
color: "#000000",
showMarker:false,
lineWidth: 1
};
var arrStyle = {
color: "#FF6633",
label: ""
};
var depStyle = {
color: "#55AAFF",
label: ""
};
var seriesCnf1 = Array();
var seriesCnf2 = Array();
var loc1 = Array();
var loc2 = Array();
var arr = data.arr;
var dep = data.dep;
for(i = 0; i < arr.length; i++) {
loc1.push([[arr[i][2], arr[i][0], arr[i][1]], [arr[i][3], arr[i][0], arr[i][1]]]);
seriesCnf1.push(arrStyle);
}
for(i = 0; i < dep.length; i++) {
loc2.push([[dep[i][2], dep[i][0], dep[i][1]] , [dep[i][3], dep[i][0], dep[i][1]]]);
seriesCnf2.push( depStyle );
}
var plot1 = $.jqplot('container1', loc1, {
title: "Arrivals Schedule",
// seriesColors: ["#941B80"],
animate: false,
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: '%X', // H:M:S
angle: 0
},
pad: 0,
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'Solutions',
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
show: true,
showLabel: true,
},
min: 0,
max: 5,
tickInterval: 1,
}
},
seriesDefaults: {
showMarker:true,
pointLabels:{
show:true,
location:'s',
labelsFromSeries: true,
formatter: $.jqplot.DefaultTickFormatter,
}
},
series: seriesCnf1,
cursor: {
show: true,
showTooltip: true,
showVerticalLine: true,
//tooltipFormatString: 'time %s',
// tooltipAxisGroups: [[xaxis]],
useAxesFormatters: true,
zoom: true,
//looseZoom: true,
dblClickReset : true,
constrainZoomTo: 'x',
},
highlighter: {
show: true,
sizeAdjust: 3,
formatString: '<table class="jqplot-highlighter"><tr><td>Time:</td><td>%s</td></tr></table>',
tooltipOffset: 10
},
grid: {
background: '#ffffff',
drawGridlines: true,
drawBorder: false,
shadow: false,
shadowAngle:-90,
},
canvasOverlay: {
show: true,
objects: [
{
rectangle: {
name: 'current',
xmax: new Date(),
xminOffset: "0px",
xmaxOffset: "0px",
yminOffset: "0px",
ymaxOffset: "0px",
color: "rgba(0, 0, 0, 0.1)",
showTooltip: true
}
},
]
}
});
var plot2 = $.jqplot('container2', loc2, {
title: "Departures Schedule",
// seriesColors: ["#941B80"],
animate: false,
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: '%X', // H:M:S
angle: 0
},
pad: 0,
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'Solutions',
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
show: true,
showLabel: true,
},
min: 0,
max: 5,
tickInterval: 1,
}
},
seriesDefaults: {
showMarker:true,
pointLabels:{
show:true,
location:'s',
labelsFromSeries: true,
formatter: $.jqplot.DefaultTickFormatter,
}
},
series: seriesCnf2,
cursor: {
show: true,
showTooltip: true,
showVerticalLine: true,
//tooltipFormatString: 'time %s',
// tooltipAxisGroups: [[xaxis]],
useAxesFormatters: true,
zoom: true,
//looseZoom: true,
dblClickReset : true,
constrainZoomTo: 'x',
},
highlighter: {
show: true,
sizeAdjust: 3,
formatString: '<table class="jqplot-highlighter"><tr><td>Time:</td><td>%s</td></tr></table>',
tooltipOffset: 10
},
grid: {
background: '#ffffff',
drawGridlines: true,
drawBorder: false,
shadow: false,
shadowAngle:-90,
},
canvasOverlay: {
show: true,
objects: [
{
rectangle: {
name: 'current',
xmax: new Date(),
xminOffset: "0px",
xmaxOffset: "0px",
yminOffset: "0px",
ymaxOffset: "0px",
color: "rgba(0, 0, 0, 0.1)",
showTooltip: true
}
},
]
}
});
}
);
}
</script>
<div id="container1" class="container1"></div>
<br>
<div id="container2" class="container2"></div>
<br>