Jqplot不使用requirejs、jquerymobile、木偶
我正在尝试将jqplot与jquerymobile、木偶和requirejs结合使用。我已经在head标签中包含了所有jqplot所需的CSS以及脚本文件,但是当我试图使用下面的代码绘制图表时Jqplot不使用requirejs、jquerymobile、木偶,jquery,jquery-mobile,requirejs,jqplot,marionette,Jquery,Jquery Mobile,Requirejs,Jqplot,Marionette,我正在尝试将jqplot与jquerymobile、木偶和requirejs结合使用。我已经在head标签中包含了所有jqplot所需的CSS以及脚本文件,但是当我试图使用下面的代码绘制图表时 define([ 'plot' ], function() { console.log("Success..Inside Offer Page Script."); console.log("Plot..."+$.jqplot); $.jqplot.config.enablePlugins =
define([ 'plot' ],
function() {
console.log("Success..Inside Offer Page Script.");
console.log("Plot..."+$.jqplot);
$.jqplot.config.enablePlugins = true;
var s1 = [ 2, 6, 7, 10 ];
var ticks = [ 'a', 'b', 'c', 'd' ];
plot1 = $.jqplot('chart1', [ s1 ], {
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
pointLabels : {
show : true
}
},
axes : {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
ticks : ticks
}
},
highlighter : {
show : false
}
});
});
它给了我错误,比如
Uncaught TypeError: undefined is not a function jqplot.barRenderer.js:41
(line 41: $.jqplot.BarRenderer.prototype = new $.jqplot.LineRenderer();)
Uncaught TypeError: Cannot call method 'push' of undefined jqplot.pointLabels.js:377
(line 377: $.jqplot.postSeriesInitHooks.push($.jqplot.PointLabels.init);)
我上面代码的define中的绘图是
define([
'../scripts/ext_libs/jquery.jqplot', 'jquery'
],
function () {
var plot;
require([
'../scripts/ext_libs/jqplot.barRenderer',
'../scripts/ext_libs/jqplot.pointLabels',
'../scripts/ext_libs/jqplot.categoryAxisRenderer',
],
function () {
plot = $.jqplot;
});
return plot;
}
);
有谁能帮我解决这些错误吗
提前感谢。尝试改用全局配置对象,看看这个: 它来自我关于木偶和RequireJS()的新书,并声明了一些jQuery插件(例如jqueryui) 您是否尝试过让绘图将jQuery作为依赖项?看起来这就是问题所在 您可能需要一个如下所示的配置:
requirejs.config({
paths: {
jquery: "path/to/jquery",
jqplot: "path/to/jqplot",
"jqplot.barRenderer": "path/to/jqplot.barRenderer",
"jqplot.pointLabels": "path/to/jqplot.pointLabels",
"jqplot.categoryAxisRenderer": "path/to/jqplot.categoryAxisRenderer"
},
shim: {
jqplot: ["jquery"],
"jqplot.barRenderer": ["jqplot"],
"jqplot.pointLabels": ["jqplot"],
"jqplot.categoryAxisRenderer": ["jqplot"]
}
});
这表明“jqplot”依赖于jQuery,插件依赖于“jqplot”。然后,您可以在代码中包含以下内容以定义绘图:
define(['jqplot.barRenderer', 'jqplot.pointLabels', 'jqplot.categoryAxisRenderer'],function () {
return $.jqplot;
});
加载插件后,这将返回jqplot
属性。您的代码可以是:
define([ 'plot' ], function() {
console.log("Success..Inside Offer Page Script.");
console.log("Plot..."+$.jqplot);
});
请尝试改用全局配置对象,查看以下对象: 它来自我关于木偶和RequireJS()的新书,并声明了一些jQuery插件(例如jqueryui) 您是否尝试过让绘图将jQuery作为依赖项?看起来这就是问题所在 您可能需要一个如下所示的配置:
requirejs.config({
paths: {
jquery: "path/to/jquery",
jqplot: "path/to/jqplot",
"jqplot.barRenderer": "path/to/jqplot.barRenderer",
"jqplot.pointLabels": "path/to/jqplot.pointLabels",
"jqplot.categoryAxisRenderer": "path/to/jqplot.categoryAxisRenderer"
},
shim: {
jqplot: ["jquery"],
"jqplot.barRenderer": ["jqplot"],
"jqplot.pointLabels": ["jqplot"],
"jqplot.categoryAxisRenderer": ["jqplot"]
}
});
这表明“jqplot”依赖于jQuery,插件依赖于“jqplot”。然后,您可以在代码中包含以下内容以定义绘图:
define(['jqplot.barRenderer', 'jqplot.pointLabels', 'jqplot.categoryAxisRenderer'],function () {
return $.jqplot;
});
加载插件后,这将返回jqplot
属性。您的代码可以是:
define([ 'plot' ], function() {
console.log("Success..Inside Offer Page Script.");
console.log("Plot..."+$.jqplot);
});
令人讨厌的问题,因为这是一个由三个依赖项组成的链条 jqplot需要jquery,而jqplot插件需要jqplot,我有一个更简单的解决方案,基于与上面相同的行 首先,像这样进行requirejs“main.js”配置
requirejs.config({
paths: {
"jquery": "path/to/jquery-1.10.2.min",
// WORKAROUND : jQuery plugins + shims
"jqplot.core": "path/to/jquery-jqplot-1.0.8.min",
"jqplot": "jquery-jqplot-module-with-plugins-1.0.8"
},
shim: {
"jqplot.core": {deps: ["jquery"]},
"jqplot": {deps: ["jqplot.core"]}
}
});
创建名为“jquery-jqplot-module-with-plugins-1.0.8.js”的包装文件模块文件,其中包含:
// wraps jquery jqplot plugin in define statement
define([
"jquery",
"path/to/jqplot.highlighter.min",
"path/to/jqplot.cursor.min",
"path/to/jqplot.dateAxisRenderer.min",
"path/to/jqplot.canvasTextRenderer.min",
"path/to/jqplot.canvasAxisLabelRenderer.min",
"path/to/jqplot.enhancedLegendRenderer.min",
"path/to/jqplot.pieRenderer.min",
"path/to/jqplot.donutRenderer.min",
], function($) {
var jqplot;
jqplot = $.jqplot;
return jqplot;
});
然后,当您需要带有这些插件的jqplot时,只需调用“jqplot”,它将加载“jquery”,然后加载“jqplot.core”,然后加载所有jqplot模块,最后返回jqplot对象:)
或
多田!:)
ps jquery插件是邪恶的,没有关于如何修复这种情况的建议,只是一个事实陈述
干杯
Ant是一个棘手的问题,因为它是由三个依赖项组成的链 jqplot需要jquery,而jqplot插件需要jqplot,我有一个更简单的解决方案,基于与上面相同的行 首先,像这样进行requirejs“main.js”配置
requirejs.config({
paths: {
"jquery": "path/to/jquery-1.10.2.min",
// WORKAROUND : jQuery plugins + shims
"jqplot.core": "path/to/jquery-jqplot-1.0.8.min",
"jqplot": "jquery-jqplot-module-with-plugins-1.0.8"
},
shim: {
"jqplot.core": {deps: ["jquery"]},
"jqplot": {deps: ["jqplot.core"]}
}
});
创建名为“jquery-jqplot-module-with-plugins-1.0.8.js”的包装文件模块文件,其中包含:
// wraps jquery jqplot plugin in define statement
define([
"jquery",
"path/to/jqplot.highlighter.min",
"path/to/jqplot.cursor.min",
"path/to/jqplot.dateAxisRenderer.min",
"path/to/jqplot.canvasTextRenderer.min",
"path/to/jqplot.canvasAxisLabelRenderer.min",
"path/to/jqplot.enhancedLegendRenderer.min",
"path/to/jqplot.pieRenderer.min",
"path/to/jqplot.donutRenderer.min",
], function($) {
var jqplot;
jqplot = $.jqplot;
return jqplot;
});
然后,当您需要带有这些插件的jqplot时,只需调用“jqplot”,它将加载“jquery”,然后加载“jqplot.core”,然后加载所有jqplot模块,最后返回jqplot对象:)
或
多田!:)
ps jquery插件是邪恶的,没有关于如何修复这种情况的建议,只是一个事实陈述
干杯
Ant谢谢你的回复@David Sulc,但我试过这么做。我还添加了jquery依赖项,但仍然存在相同的错误。Cna你还可以给我一些建议吗?还有一个问题,是否必须在jquery的
文档中编写绘图创建代码。ready
?该脚本是否应在页面完全创建后运行?我已编辑了我的答案,以引用您可能希望尝试的示例全局配置。我不认为您的问题与文档有关。准备就绪
,但绘图代码很可能位于视图的onShow
方法中,以确保DOM元素存在。我只在@David Sulc中这样做,对于requirejs,我有一个配置文件,其中我给出了绘图路径,如下plot:'../scripts/utils/jqplot.module',
,但仍然存在错误:(您的第二个代码块不需要jQuery。我知道您的第一个代码块确实需要它,但那太晚了。jQuery需要在模块定义图中声明为依赖项(根据上面的我的代码)。你好@David Sulc我已经更新了上面的代码,请看一看,告诉我如何解决错误。谢谢@David Sulc的回复,但我尝试过这么做。我也添加了jquery依赖项,但仍然存在相同的错误。Cna您还可以提些其他建议吗?还有一个问题,是否必须在jquery的document.ready
?脚本是否应在页面完全创建后运行?我已编辑了我的答案,以引用您可能希望尝试的示例全局配置。我不认为您的问题与document.ready
有关,但绘图代码最有可能位于视图的显示方法中,以确保DOM元素存在。我只在@David Sulc执行此操作,对于requirejs,我有一个配置文件,其中我给出了绘图路径,如下plot:'../scripts/utils/jqplot.module',
,但仍然存在错误:(您的第二个代码块不需要jQuery。我知道您的第一个代码块确实需要它,但那太晚了。jQuery需要在模块定义图中声明为依赖项(根据上面的我的代码).Hello@David Sulc我已经更新了上面的代码,请看一看,然后告诉我如何解决错误。你不必在文件末尾添加.js
扩展名。我想它找不到Ballenderer的代码。@Gyandeep谢谢你的回复,但requirejs已经假设给定的路径将只包含一个js文件。所以它是正确的这不是必需的。因为当我运行你的代码时,它使用纯javascript对我来说运行得很好。我认为你的包含文件存在一些问题。是的,我知道,但使用requirejs way@Gyandeep对我来说很重要。谢谢你的帮助。你不必在文件末尾添加.js
扩展名。我认为它找不到代码感谢你的回复。@Gyandeep谢谢你的回复,但是已经需要了