TypeError：$ .jqplot未定义

Question

FireBug为var plot1显示以下错误消息：

  

TypeError：$ .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>