[英]Object function (e,t){return new x.fn.init(e,t,r)} has no method 'plot'
我成功地使用了浮动图表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>
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无法访问。 。
未捕获的TypeError：对象函数（a，b）{返回新的e.fn.init（a，b，h）}没有方法'widget'
[英]Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'widget'
文本“function(e,t){return new b.fn.init(e,t,r)}”出现在 Shopify 的产品详细信息页面上
[英]The text "function(e,t){return new b.fn.init(e,t,r)}" appears on the product details page in Shopify
jQuery UI-未捕获的TypeError：对象函数（a，b）{返回新的e.fn.init（a，b，h）}没有方法'dialog'
[英]jQuery UI - Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'dialog'
为什么在e.fn.e.init或x.fn.x.init中有第二个e或x（jQuery实例名称，在chrome调试器中）？
[英]Why is there a second e or x in e.fn.e.init or x.fn.x.init (jQuery instance name, in chrome debugger)?
为什么jQuery为什么使用“ new jQuery.fn.init（）”来创建jQuery对象，但我不能呢？
[英]Why does jQuery use “new jQuery.fn.init()” for creating jQuery object but I can't?
Rsaencrypt和奇怪的Javascript函数（e，t，r，n，c，a，l）
[英]Rsaencrypt and strange Javascript function(e,t,r,n,c,a,l)
未捕获的TypeError：对象函数（a）{返回新j（a）}没有方法'has'
[英]Uncaught TypeError: Object function (a){return new j(a)} has no method 'has'
量角器E2E测试错误：对象[对象]没有方法'getWindowHandle'
[英]Protractor E2E Testing Error : Object [object Object] has no method 'getWindowHandle'
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.