1

Jquery mobile、marionette、requirejs で jqplot を使用しようとしています。jqplot に必要なすべての CSS とスクリプト ファイルを head タグに含めましたが、以下のコードを使用してグラフをプロットしようとすると

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;

} );

これらのエラーを解決するにはどうすればよいですか？

前もって感謝します。

4

2 に答える 2

1

代わりにグローバル構成オブジェクトを使用してみてください。これを見てください: https://github.com/davidsulc/structuring-backbone-with-requirejs-and-marionette/blob/master/assets/js/require_main.js

これは、Marionette と 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);
});
于 2013-07-31T17:26:42.700 に答える
0

3つの依存関係の連鎖であるため、厄介な問題

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が必要なときはいつでも、「jquery」、「jqplot.core」、すべてのjqplotモジュールをロードする「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 プラグインは悪です。その状況を修正する方法についての提案はありません。単なる事実の表明です。

乾杯

蟻

于 2014-02-12T14:12:37.153 に答える