1. 首頁
  2. 問答
  3. 對象函數（e，t）{return new x.fn.init（e，t，r）}沒有方法'plot'

對象函數（e，t）{return new x.fn.init（e，t，r）}沒有方法'plot'

2014-01-13 48 views
-1

我成功地使用flot charts API以圖形方式顯示數據。我製作了大約30個條形圖，現在我將它們全部顯示在一個頁面中，並根據下拉列表中選定的值顯示圖形。我能夠單獨獲取圖形，但是當所有圖形放在一個頁面中時，我收到了上述錯誤，我無法解決此問題。請在這方面幫助我。對象函數（e，t）{return new x.fn.init（e，t，r）}沒有方法'plot'

<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>

來源

2014-01-13 Firoz

+0

你應該給我們看一些代碼 – RononDex

+1

這個問題似乎是無關緊要的，因爲關於你的代碼**的問題必須包含在問題文本中複製問題**的最低必要代碼（參見http：// sscce .ORG）。 –

+0

代碼非常大RononDex – Firoz

回答

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。

來源

2014-01-13 13:08:49 Adam

+0

我檢查了我的代碼並刪除了包含的js的不同版本。但我仍然得到這個錯誤亞當。請幫助我在這regrard – Firoz

+0

請確保flotcharts腳本出現在您現在在您的頁面上的jQuery的剩餘版本。 – Adam

+0

嗨亞當我給我的js命令的方式我已經把我的js仍然我沒有得到它請幫助我在這方面的問候 – Firoz

相關問題

 相關問題