对象函数（e，t）{return new x.fn.init（e，t，r）}没有方法'plot'

时间：2014-01-13 12:52:13

标签： javascript flot html-select

我成功地使用flot chart API以图形方式显示数据。我已经建立了大约30个条形图，现在我将它们全部显示在一个页面中，并根据下拉列表中选择的值显示图形。我可以单独获取图形，但当所有图形放在一个页面中时，我得到上述错误，我无法解决这个问题。请在这方面帮助我。

<select id="zones" name="zones" onchange="getgraph()">
<option value="overall">Overall</option>
<option value="sea">SEA</option>
<option value="india">INDIA</option>
<option value="nea">NEA</option>
<option value="pz">PZ</option>
</select>
<a onClick="change()" href="#">Click Here</a>
<div id="one">
<?php include "barchart.php";?>
</div>
<div id="two" style="display:none">
<?php include "barchart1.php";?>
</div>

的JavaScript 

function change()
{alert("hi");
    document.getElementById('two').style.display='block';
        document.getElementById('one').style.display='none';
}

barchart.php 

<?php

    /* Your Database Name */
    $dbname = 'finalCMS';

    /* Your Database User Name and Passowrd */
    $username = 'root';
    $password = 'password1!';

    try {
      /* Establish the database connection */
      $conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password);
      $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


      $result = $conn->query("SELECT `EquipmentMainCatagory`,count(`EquipmentMainCatagory`) from asset a join assetinfo ai on a.assetid=ai.assetid and upper(ai.EquipmentStatus) like upper('%Active%') group by `EquipmentMainCatagory`");




      $rows = array();

        foreach($result as $r) {


         $rows[] = array( $r['EquipmentMainCatagory'],(int)$r['count(`EquipmentMainCatagory`)']); 


        }

    // convert data into JSON format
    $jsonTable = json_encode($rows);

        //print_r($jsonTable);
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }
    //mysql_close($conn);

     $conn=null;

    ?>







<div id="placeholder" style="width:900px;height:450px;"></div>

 <script type="text/javascript">
        //******* 2012 Average Temperature - BAR CHART
        var data =<?php echo $jsonTable;?>;
        //alert(data);





var ticks = [];
for (var i = 0; i < data.length; i++) {
    ticks.push([i,data[i][0]]);
    data[i][0] = i;   
}
//alert(ticks);
        //var data = [[0, 11],[1, 15],[2, 25],[3, 24],[4, 13],[5, 18]];
        var dataset = [{ data: data, color: "#5482FF" }];
        //var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"],[4, "Beijing"], [5, "Sydney"]];

        var options = {
            series: {
                lineWidth: 5,
                bars: {
                    show: true,
                    barWidth: 0.5,
                    align:"center"
                }
            },
             xaxis: {
                axisLabel: "EquipmentMainCatagory",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10,
                ticks: ticks,
                //rotateTicks:90
                labelAngle: 90

            },
            yaxis: {
                axisLabel: "# Assets",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 3,

            },

            grid: {
                hoverable: true,
                borderWidth: 0,
                backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
            }
        };

      //jQuery(document).ready(function() {
      function plot1(){
            $.plot($("#placeholder"), dataset, options);
            $("#placeholder").UseTooltip();
      }


           // });   

      var previousPoint = null, previousLabel = null;

        $.fn.UseTooltip = function () {
            $(this).bind("plothover", function (event, pos, item) {
                if (item) {
                    if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                        previousPoint = item.dataIndex;
                        previousLabel = item.series.label;
                        $("#tooltip").remove();

                        var x = item.datapoint[0];
                        var y = item.datapoint[1];

                        var color = item.series.color;

                        //console.log(item.series.xaxis.ticks[x].label);               

                        showTooltip(item.pageX,
                        item.pageY,
                        color,
                      // "<strong>" + y + "</strong>");
         item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong>");

                    }


                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        };

        function showTooltip(x, y, color, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y ,
                left: x,
                border: '2px solid ' + color,
                padding: '3px',
                'font-size': '9px',
                'border-radius': '5px',
                'background-color': '#fff',
                'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                opacity: 0.9
            }).appendTo("body").fadeIn(200);
        }
    </script>



<Script>plot1()</Script>

我的javascript订单

<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

        <script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>      
        <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="assets/plugins/bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript" ></script>
        <!--[if lt IE 9]>
        <script src="assets/plugins/excanvas.min.js"></script>
        <script src="assets/plugins/respond.min.js"></script>  
        <![endif]-->   
        <script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
        <script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>  
        <script src="assets/plugins/jquery.cookie.min.js" type="text/javascript"></script>
        <script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>
        <!-- END CORE PLUGINS -->

        <!-- BEGIN PAGE LEVEL PLUGINS tree -->
    <script src="assets/plugins/bootstrap-tree/bootstrap-tree/js/bootstrap-tree.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN PAGE LEVEL SCRIPTS  tree-->
    <script src="assets/scripts/ui-tree.js"></script>     
    <!-- END PAGE LEVEL SCRIPTS -->

    <!-- BEGIN PAGE LEVEL PLUGINS view assets -->
    <script type="text/javascript" src="assets/plugins/select2/select2.min.js"></script>
    <script type="text/javascript" src="assets/plugins/data-tables/jquery.dataTables.js"></script>
    <script type="text/javascript" src="assets/plugins/data-tables/DT_bootstrap.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->

   <!-- page level plugins for edit page-->
    <script type="text/javascript" src="assets/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script> 

    <script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="assets/plugins/moment.min.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery.mockjax.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.min.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-editable/inputs-ext/address/address.js"></script>

     <!-- just -->
        <script type="text/javascript" src="assets/plugins/ckeditor/ckeditor.js"></script>  
    <script type="text/javascript" src="assets/plugins/bootstrap-fileupload/bootstrap-fileupload.js"></script>
    <script type="text/javascript" src="assets/plugins/chosen-bootstrap/chosen/chosen.jquery.min.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-toggle-buttons/static/js/jquery.toggle.buttons.js"></script>
    <script type="text/javascript" src="assets/plugins/clockface/js/clockface.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-daterangepicker/date.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script> 
    <script type="text/javascript" src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>  
    <script type="text/javascript" src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js"></script>   
    <script type="text/javascript" src="assets/plugins/jquery.input-ip-address-control-1.0.min.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery-multi-select/js/jquery.multi-select.js"></script>   
    <script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js" type="text/javascript" ></script>
    <script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js" type="text/javascript" ></script> 
    <script src="assets/plugins/jquery.pwstrength.bootstrap/src/pwstrength.js" type="text/javascript" ></script>
    <script src="assets/plugins/bootstrap-switch/static/js/bootstrap-switch.js" type="text/javascript" ></script>
    <script src="assets/plugins/jquery-tags-input/jquery.tagsinput.min.js" type="text/javascript" ></script>
    <!--page level plugin for edit page ends here-->

        <script src="assets/scripts/app.js"></script>  
        <script src="js/index_js.js"></script> 
        <!-- for notifications -->
         <script src="js/ournotification.js"></script> 
       <!-- <script src="js/filterdashboard.js"></script>-->
        <script src="js/viewpage_js.js"></script> 
         <script src="js/allvalidate.js"></script>
         <script src="js/uprofile.js"></script>
         <script src="js/custom.js"></script>
         <!--<script src="js/rightclick.js"></script>
         <script src="js/f12.js"></script>-->
          <!-- for jqplot graphs -->

          <!--<script src="js/jqplot.js"> </script>
           <script src="assets/plugins/jqplot.pieRenderer.min.js"></script>
            <link rel="stylesheet" type="text/css" href="css/graphs.css">-->
            <!-- end of jqplot graphs js -->
       <!--  <script src="js/filter_assets.js"></script>-->
        <!--<script src="js/filter_view.js"></script>--> 
        <script src="assets/plugins/bootstrap-tag/js/bootstrap-tag.js" type="text/javascript" ></script> 
    <script src="assets/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript" ></script>
    <script src="assets/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js" type="text/javascript" ></script>
    <!-- BEGIN:File Upload Plugin JS files-->
    <script src="assets/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
    <!-- The Templates plugin is included to render the upload/download listings -->
    <script src="assets/plugins/jquery-file-upload/js/vendor/tmpl.min.js"></script>
    <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
    <script src="assets/plugins/jquery-file-upload/js/vendor/load-image.min.js"></script>
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <script src="assets/plugins/jquery-file-upload/js/vendor/canvas-to-blob.min.js"></script>
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="assets/plugins/jquery-file-upload/js/jquery.iframe-transport.js"></script>
    <!-- The basic File Upload plugin -->
    <script src="assets/plugins/jquery-file-upload/js/jquery.fileupload.js"></script>
    <!-- The File Upload file processing plugin -->
    <script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-fp.js"></script>
    <!-- The File Upload user interface plugin -->
    <script src="assets/plugins/jquery-file-upload/js/jquery.fileupload-ui.js"></script>
    <!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
    <!--[if gte IE 8]><script src="assets/plugins/jquery-file-upload/js/cors/jquery.xdr-transport.js"></script><![endif]-->
    <!-- END:File Upload Plugin JS files-->
    <!-- END PAGE LEVEL PLUGINS -->

        <script src="assets/scripts/inbox.js"></script>  
        <script src="assets/scripts/table-managed.js"></script>
        <script src="assets/scripts/form-components.js"></script>
        <script src="assets/scripts/jquery.colorbox.js"></script> 
        <script src="js/inbox_related.js"></script> 

        <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>    
<script type="text/javascript"  src="assets/plugins/flot/jquery.flot.js"></script>
<script src="assets/plugins/flot/jquery.flot.time.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.tickrotatotor.min.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="assets/plugins/flot/jquery.flot.labelangle.min.js"></script>

1 个答案:

答案 0 :(得分：3)

<强> TL; DR

确保您的网页上只有一个版本的jQuery

我敢打赌，你在网页上包含了多个版本的jQuery。更具体地说，它可能看起来（至少）像这样：

<script src="some.jquery.version.js"></script>
<script src="flotcharts.js"></script>

...
...
...

<script src="some.jquery.version.js"></script>

现在，flotcharts API已附加到页面上第一个jQuery脚本的原型（或fn），但不幸的是，第二个jQuery版本有它自己的原型（或fn）并且在覆盖第一个jQuery原型时呈现flotcharts不可访问。

相关问题
最新问题