Jqplot ne fonctionne pas avec requirejs, jquerymobile, marionette

Question

J'essaie d'utiliser jqplot avec Jquery mobile, marionette et requirejs. J'ai inclus tous jqplot CSS nécessaires ainsi que les fichiers de script dans les balises de tête, mais quand je suis en train de tracer un graphique à l'aide ci-dessous le code

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 
    } 
}); 
}); 

il me donne des erreurs comme

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

L'intrigue en mon code Définissons ci-dessus est

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; 

} );

Quelqu'un peut-il m'aider s'il vous plaît comment puis-je résoudre ces erreurs?

Merci d'avance.

Answer 1

Essayez d'utiliser un objet de configuration globale à la place, un coup d'oeil à celui-ci: https://github.com/davidsulc/structuring-backbone-with-requirejs-and-marionette/blob/master/assets/js/require_main.js

Il est de mon nouveau livre sur Marionette & RequireJS (https://leanpub.com/structuring-backbone-with-requirejs-and-marionette), et déclare certains plugins jQuery (par exemple de jQuery UI).

Avez-vous essayé de faire en sorte que votre intrigue ait jQuery en tant que dépendance? On dirait que c'est le problème.

Vous aurez probablement besoin d'une configuration à la recherche quelque chose comme ceci:

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"] 
    } 
}); 

Cela indique que « jqplot » dépend de jQuery, et les plug-ins dépendent de « jqplot ». Ensuite, vous pouvez avoir dans votre code pour définir parcelle:

define(['jqplot.barRenderer', 'jqplot.pointLabels', 'jqplot.categoryAxisRenderer'],function() { 
    return $.jqplot; 
}); 

Cela renverra la propriété jqplot lorsque les plugins ont été chargés. Votre code peut alors être:

define([ 'plot' ], function() { 
    console.log("Success..Inside Offer Page Script."); 
    console.log("Plot..."+$.jqplot); 
}); 

Answer 2

problème méchant, car il est une chaîne de trois dépendances

jquery est nécessaire pour jqplot qui est nécessaire pour les plugins de jqplot, j'ai une solution plus simple basée sur les mêmes lignes que celui ci-dessus

premier requirejs faire votre "main.js" config comme si

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"]} 
    } 
}); 

créer un fichier de module de fichier wrapper appelé « jquery-jqplot-module avec PLU gins-1.0.8.js », contenant:

// 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; 
}); 

Alors chaque fois que vous avez besoin jqplot avec ces plug-ins, il suffit d'appeler pour « jqplot » qui charge « jquery » puis « jqplot.core », puis tous les jqplot modules, puis finalement retourner l'objet jqplot :)

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

ou

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

Tada!:)

plugins ps jquery sont mauvais, aucune suggestion comment résoudre cette situation, juste une déclaration de fait

acclamations

Ant