java - JSF & jqPlot 未捕获类型错误

Question

我在将 jqPlot 与 JSF 结合使用时遇到问题

我将此代码添加到我的 JSF 页面:

$(document).ready(function () {
  var s1 = [200, 600, 700, 1000];
  var s2 = [460, - 210, 690, 820];
  var s3 = [-260, - 440, 320, 200];
  var ticks = ['May', 'June', 'July', 'August'];
  var plot1 = $.jqplot('chart1', [s1, s2, s3], {
    // The "seriesDefaults" option is an options object that will
    // be applied to all series in the chart.
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: {
        fillToZero: true
      }
    },
    series: [{
      label: 'Hotel'
    }, {
      label: 'Event Regristration'
    }, {
      label: 'Airfare'
    }],
    legend: {
      show: true,
      placement: 'outsideGrid'
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ticks
      },
      yaxis: {
        pad: 1.05,
        tickOptions: {
          formatString: '$%d'
        }
      }
    }
  });
});

但是当我尝试加载页面时出现此错误:

Uncaught TypeError: Cannot read property 'BarRenderer' of undefined
(anonymous function)portfolioModeling.xhtml:184
f.extend._Deferred.e.resolveWithjquery.min.js:2
e.extend.readyjquery.min.js:2
c.addEventListener.C

我添加了所有必需的 js 文件和 css 文件，但我迷路了，不知道问题出在哪里

提前致谢

Answer 1

如果您使用的是本身已经随 jQuery 一起提供的 JSF 组件库，例如 PrimeFaces、RichFaces、ICEfaces 等，就会发生这种情况。

然后你不应该包含另一个版本的 jQuery，那只会导致所有颜色的 JavaScript 错误。

如果您有一个 jQuery 插件和一个依赖它的脚本，那么您应该将其添加为 <h:outputScript target="head">在<h:body>里面而不是在 <h:head> 里面.通过这种方式，您可以保证它在 捆绑了 jQuery 的 JSF 组件库之后加载。

<h:head>
    ...
</h:head>
<h:body>
    <h:outputScript name="js/jquery.jqplot.js" target="head" />
    <h:outputScript name="js/onload.js" target="head" />
    ...
</h:body>

但是，当 View 包含明确需要 jQuery 的组件时，捆绑 jQuery 的 JSF 组件库可能仅被自动包含。如果 View 不包含它，则 jQuery 可能不会自动包含，然后您的插件和脚本就会中断。如果您需要在每个 View 中强制包含jQuery，那么您需要在<h:outputScript> 中显式声明它。在<h:head> .

不清楚您使用的是哪个组件库，但如果是 PrimeFaces，则为

<h:head>
    ...
    <h:outputScript library="primefaces" name="jquery/jquery.js" />
    <h:outputScript name="js/jquery.jqplot.js" />
    <h:outputScript name="js/onload.js" />
</h:head>
<h:body>
    ...
</h:body>

(然而，手动摆弄 jqPlot 会很奇怪，因为 PrimeFaces 已经提供了几个在幕后使用 jqPlot 的 JSF 组件)

在 RichFaces 4.x 的情况下是

<h:head>
    ...
    <h:outputScript name="jquery.js" />
    <h:outputScript name="js/jquery.jqplot.js" />
    <h:outputScript name="js/onload.js" />
</h:head>
<h:body>
    ...
</h:body>