Jqplot圖不會顯示嵌套的div標籤

我正在JSF2.2模板客戶端xhtml頁面中測試一個jqplot混合欄和線圖，該頁面有一個選項卡式視圖。如果我把圖放入標籤視圖中，它不會顯示。如果我把它放在視圖外面，它會顯示：Jqplot圖不會顯示嵌套的div標籤

<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>

我包括以下JS在XHTML頁面的底部：

<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" />

的問題是，如果我不使用$解決（DOCUME NT）。就緒（函數（），而使用：

function processChartAsClick() { 

....... 
}

我想這是因爲劇本沒有得到一個標籤視圖內解僱了，因爲選項卡式視圖是一個單獨的jQuery UI的事件，但把它外面當文檔被加載時，標籤視圖會觸發事件？希望對此有所澄清。謝謝！

來源

2017-03-31 jay tai

除了包含腳本的方式之外，我沒有看到任何與JSF相關的東西。如果以純HTML方式包含它們，它會起作用嗎？如果它在嵌套div外工作，那肯定不是JSF相關的 – Kukeltje

你是對的。在這個特定的問題中，問題完全與jQuery/JS相關，但是這個問題引起了我對與嵌套標記中的JSF事件有關的問題的關注。我不知道這是JSF相關的還是純粹的JS相關的，但我會分開發布，因爲我設法找到這個特定問題的解決方案。我也想刪除這個問題的JSF標籤，但我看不到我能做到這一點 –

答案僅僅是爲腳本提供自己的（自治）功能，因爲文檔就緒方法是在頁面加載時觸發的。這意味着如果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>

雖然這使得它拋出有關如何處理嵌套的div事件在JSF應用程序的一些其他問題的圖表，但需要單獨發佈。

來源

2017-04-01 09:38:36

Jqplot圖不會顯示嵌套的div標籤

回答

相關問題