試圖使用jqplot與jquery mobile，牽線木偶和requirejs

Question

我想用jqplot與jquery mobile，牽線木偶和requirejs。我已經囊括了所有jqplot需要CSS，以及在head標籤的腳本文件，但是當我嘗試使用下面的代碼

define([ 'jquery', 'plot' ], 
    function($) { 
console.log("Success..Inside Offer Page Script."); 
console.log("Plot..."+$.jqplot); 
console.log("jquery..."+$); 
$.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' 
], 
function() { 
var plot; 
require([ 
    '../scripts/ext_libs/jqplot.barRenderer', 
    '../scripts/ext_libs/jqplot.pointLabels', 
    '../scripts/ext_libs/jqplot.categoryAxisRenderer', 
    ], 
function() { 
    plot = $.jqplot; 
}); 
return plot; 

}）;

任何人都可以請幫助我如何解決這些錯誤。他們使用jqplot和requirejs的問題？

在此先感謝。

Answer 1

我沒有使用牽線木偶，但其他一切正常工作在我身邊。我有一個jqplot模塊是這樣的：

define([ 
    '../js/plugins/jqplot/jquery.jqplot' 
    , 'css!../js/plugins/jqplot/jquery.jqplot' 
    ], 
    function() { 
     var plot; 
     require([ 
      '../js/plugins/jqplot/plugins/jqplot.barRenderer' 
      , '../js/plugins/jqplot/plugins/jqplot.logAxisRenderer' 
      , '../js/plugins/jqplot/plugins/jqplot.categoryAxisRenderer' 
      , '../js/plugins/jqplot/plugins/jqplot.canvasAxisTickRenderer' 
      , '../js/plugins/jqplot/plugins/jqplot.canvasTextRenderer' 
      , '../js/plugins/jqplot/plugins/jqplot.pointLabels' 
      , '../js/plugins/jqplot/plugins/jqplot.enhancedLegendRenderer' 
      ], 
     function() { 
      plot = $.jqplot; 
     }); 
     return plot; 
    } 
); 

其中我需要從我的網頁腳本通常需要這樣的：

require(["plot"], function (plot) { 
    // do something here with plot or... $.jqplot 
}; 

您應該能夠使用$.plot向右走，因爲一旦你需要該模塊將在$上提供jqplot。

編輯：
試試這個：

define([ 'jquery', 'plot' ], 
    function($) { 
     console.log("Success..Inside Offer Page Script."); 
     console.log($); 
     console.log($.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 
      } 
     }); 
    }); 

Answer 2

看起來像以前require(...)初始化plot返回。我曾經有過共同的解決方案，而我的plot已部分填充。我最終設置了shim中的所有jqplot插件並相應地更改了我的`plot.js'，正如建議的here。

requirejs.config

shim: { 
    'jqplot': ['jquery'], 
    'lib/jquery/jqplot/plugins/jqplot.canvasTextRenderer': ['jqplot'], 
    'lib/jquery/jqplot/plugins/jqplot.pieRenderer': ['jqplot'], 
    'lib/jquery/jqplot/plugins/jqplot.barRenderer': ['jqplot'], 
    'lib/jquery/jqplot/plugins/jqplot.categoryAxisRenderer': ['jqplot'], 
    'lib/jquery/jqplot/plugins/jqplot.canvasAxisLabelRenderer': ['jqplot'], 
    'lib/jquery/jqplot/plugins/jqplot.enhancedLegendRenderer': ['jqplot'], 
    'lib/jquery/jqplot/plugins/jqplot.highlighter': ['jqplot'], 
} 

plot.js

define(['lib/jquery/jqplot/plugins/jqplot.canvasTextRenderer', 
     'lib/jquery/jqplot/plugins/jqplot.pieRenderer', 
     'lib/jquery/jqplot/plugins/jqplot.barRenderer', 
     'lib/jquery/jqplot/plugins/jqplot.categoryAxisRenderer', 
     'lib/jquery/jqplot/plugins/jqplot.canvasAxisLabelRenderer', 
     'lib/jquery/jqplot/plugins/jqplot.enhancedLegendRenderer', 
     'lib/jquery/jqplot/plugins/jqplot.highlighter'], 
     function() { 
    return $.jqplot; 
}); 

Answer 3

有點晚了比賽，但....以上不工作，因爲需要是異步返回，所以能夠返回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模塊與 - 插件 - 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 jque RY插件是邪惡，沒有提出如何解決這種情況，只是一個事實的

歡呼

螞蟻聲明