Jqplot 图未显示在嵌套 div 标签内

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

答案很简单，就是为脚本提供它自己的（自主）功能，因为文档就绪方法在页面加载时被触发。这意味着如果 JS/Jquery 脚本在 div 中，它使用自己的 JS UI 函数，那么它将被忽略，除非脚本是嵌套的 div JS 的一部分功能。

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

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

<script>

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

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

Jqplot 图未显示在嵌套 div 标签内

Jqplot graph is not displaying inside nested div tags

javascript

jquery

html

jqplot