Question

我在具有标签视图的JSF2.2模板客户端xhtml页面中测试jqplot混合条和线图。如果我将图表放在选项卡式视图中，它将不会显示。如果我把它放在它所显示的视图之外：

<div id="datanalytics">
<div class="w3-layout-container">
<div id="chart2"> </div> 
</div>
</div>

以上只是图表所在的空白区域。我发现Chrome或Firefox（Firebug）中没有JS错误。如果我将图形放在主div之外，它会完美显示：

<div id="chart2"> </div> 
<div id="datanalytics">
<div class="w3-layout-container">
</div>
</div>

我在xhtml页面的底部包含以下JS：

<script>
 $(document).ready(function () {
  var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15],
  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3],
  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];
  var line2 = [['Nickle', 28], ['Aluminum', 13], ['Xenon', 54], ['Silver', 47],
  ['Sulfer', 16], ['Silicon', 14], ['Vanadium', 23]];

  var plot2 = $.jqplot('chart2', [line1, line2], {
  series: [{renderer: $.jqplot.BarRenderer}, {xaxis: 'x2axis', yaxis: 'y2axis'}],
  axesDefaults: {
  tickRenderer: $.jqplot.CanvasAxisTickRenderer,
  tickOptions: {
  angle: 30
  }
  },
  axes: {
  xaxis: {
  renderer: $.jqplot.CategoryAxisRenderer
  },
  x2axis: {
  renderer: $.jqplot.CategoryAxisRenderer
  },
  yaxis: {
  autoscale: true
  },
  y2axis: {
  autoscale: true
  }
  }
  });

  });

  </script>

在我的xhtml模板页面中，我添加了以下库（在body标记的末尾，以便脚本在页面加载后执行）：

    <h:outputScript name="js/jqplot/jqplot.canvasAxisTickRenderer.js"/>
    <h:outputScript name="js/jqplot/jqplot.dateAxisRenderer.js"/>
    <h:outputScript name="js/jqplot/chartExtender.js" />
    <h:outputScript name="js/jqplot/excanvas.js" />
    <h:outputScript name="js/jqplot/chartExtender.js" />
    <h:outputScript name="js/jqplot/jqplot.categoryAxisRenderer.js" />
    <h:outputScript name="js/jqplot/jqplot.barRenderer.js" />

如果我不使用$（document）.ready（function（）而是使用：

，问题就解决了

  function processChartAsClick() {

 .......
 }

我认为这是因为脚本不会在选项卡式视图中被触发，因为选项卡式视图是一个单独的Jquery UI事件，但是将其放在选项卡式视图之外会在文档加载时触发事件？希望对此有任何澄清。谢谢！

Answer 1

答案只是为脚本提供自己的（自主）功能，因为在页面加载时会触发document ready方法。这意味着如果JS / Jquery脚本位于使用其自己的JS UI函数的div内部，那么除非脚本是嵌套div JS函数的一部分，否则它将被忽略。

我添加了一个按钮和相应的功能，图表现在显示：

<button type="button" class="button" onclick="showChart()">Show the chart </button>

<script>

 function showChart() {
 JS code here
 .......
}
</script>

虽然这会呈现图表，但它会引发更多关于如何处理JSF应用程序中嵌套div中的事件的问题，但这需要单独发布。

Jqplot图形不显示在嵌套的div标签内

1 个答案: