2

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

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 一起使用是他们的问题吗？

提前致谢。

4

3 回答 3

2

游戏有点晚了，但是....上面不起作用，因为 require 是异步返回的，所以能够在没有加载任何 jqplot 插件的情况下返回 jqplot ！下面的异步安全解决方案

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

jqplot 需要 jquery，而 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 插件是邪恶的，没有建议如何解决这种情况，只是一个事实陈述

干杯

蚂蚁

于 2014-02-12T14:16:35.953 回答
2

我没有使用木偶，但其他一切都在我身边工作正常。我有一个这样的 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
            }
        });
    });
于 2013-07-30T10:33:45.170 回答
0

看起来是在初始化plot之前返回的。require(...)我曾经有共同的解决方案，我plot的部分人满了。我最终设置了所有 jqplot 插件，shim并相应地更改了我的“plot.js”，正如这里所建议的那样。

需要js.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'],
}

情节.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;
});
于 2014-01-15T14:29:50.750 回答