Question

我正在尝试将jqplot与Jquery mobile，marionette和requirejs一起使用。我已经在头标记中包含了所有jqplot所需的CSS以及脚本文件，但是当我尝试使用下面的代码绘制图表时

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([
  '../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;

} ）;

有谁可以帮助我如何解决这些错误？

提前致谢。

Answer 1

请尝试使用全局配置对象，请查看以下内容：https://github.com/davidsulc/structuring-backbone-with-requirejs-and-marionette/blob/master/assets/js/require_main.js

这是我在Marionette＆amp; amp; RequireJS（https://leanpub.com/structuring-backbone-with-requirejs-and-marionette），并声明一些jQuery插件（例如jQuery UI）。

您是否尝试过将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);
});

Answer 2

讨厌的问题，因为它是三个依赖的链

jqplot插件需要jqplot需要jquery，我有一个基于与上面相同的简单解决方案

首先执行你的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对象:)

require(["jquery", "jqplot"], function ($, $jqplot) {
    console.log("Success..Inside Require JS");
    console.log("Plot...", $.jqplot, $jqplot);
});

或

define(["jquery", "jqplot"], function ($, $jqplot) {
    console.log("Success..Inside Define JS");
    console.log("Plot...", $.jqplot, $jqplot);
});

多田！ :)

ps jquery插件是邪恶的，没有建议如何解决这种情况，只是一个事实陈述

欢呼声

蚂蚁

Jqplot不能使用requirejs，jquerymobile，marionette

2 个答案: