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を含めています：私の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> 

私は（スクリプトがページの読み込み後に実行するように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）.ready（関数（）、代わりに使用します。

function processChartAsClick() { 

....... 
} 

私はタブ付きビューは、別のjQuery UIのイベントであるため、スクリプトがタブ付きビュー内クビにされないため、これがあると思いますが、外に置きますタブ付きビューは、ドキュメントがロードされたときにイベントを発生させますか？ これについての説明はありがたいです。ありがとうございました！

Answer 1

答えは、ドキュメントの準備ができているメソッドがページの読み込み時に起動されるため、スクリプトに独自の（自律的な）関数を与えるだけです。これは、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要素内のイベントを処理する方法についていくつかのより多くの質問をスローチャートを描画しますが、それを別々に掲示する必要があります。