爲什麼我的圖表（jqplot）無法呈現，直到與zk集成時按下按鈕？

我正在使用zk來顯示一個頁面，並將其作爲我包含一個html/js頁面的一部分，該頁面包含我想要使用jqplot顯示的圖表。爲什麼我的圖表（jqplot）無法呈現，直到與zk集成時按下按鈕？

如果我自己加載html文件，情節顯示正常。當我將它包含在zul頁面中時，它無法顯示。但是，確實出現了一個重置按鈕（它重置圖表上的縮放級別）。如果我點擊那個按鈕，圖表顯示正常。

我不知道爲什麼會發生這種情況或如何解決它。有沒有人有任何想法？

的test.html ...

<span id="test">Test2</span> 
<div class="jqPlot" id="chart1" style="height:300px; width:400px;"></div> 

<button onclick="plot.resetZoom();">Reset</button> 

<script language="javascript" type="text/javascript" src="/zk-test/js/jqplot/jquery.jqplot.js"></script> 
<script language="javascript" type="text/javascript" src="/zk-test/js/jqplot/plugins/jqplot.cursor.js"></script> 
<script language="javascript" type="text/javascript" src="/zk-test/js/jqplot/plugins/jqplot.dateAxisRenderer.js"></script> 


<script type="text/javascript" language="javascript"> 
    $(document).ready(function(){ 
    $.jqplot.config.enablePlugins = true; 

    var goog = [["6/22/2009",425.32], 
    ["6/8/2009",424.84], 
    ["5/26/2009",417.23], 
    ["5/11/2009",390], 
    ["9/2/2008",444.25], 
    ["8/27/2007",515.25]]; 

    plot = $.jqplot('chart1', [goog], { 
    // title: 'Google, Inc.', 
    series: [{ 
     // label: 'Google, Inc.', 
     neighborThreshold: -1 
    }], 
    axes: { 
     xaxis: { 
      renderer:$.jqplot.DateAxisRenderer, 
      min:'August 1, 2007', 
      tickInterval: '4 months', 
      tickOptions:{formatString:'%Y/%#m/%#d'} 
     }, 
     yaxis: { 
      renderer: $.jqplot.LogAxisRenderer, 
      tickOptions:{formatString:'$%.2f'} 
     } 
    }, 
    cursor:{show:true, zoom:true} 
}); 
}); 
</script>

而且我的測試ZUL網頁...

<?xml version="1.0" encoding="UTF-8"?> 
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?> 
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?> 
<?page zscriptLanguage="GroovyGrails"?> 

<zk xmlns="http://www.zkoss.org/2005/zul" 
    xmlns:h="http://www.w3.org/1999/xhtml" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://www.zkoss.org/2005/zul 
http://www.zkoss.org/2005/zul/zul.xsd"> 

<window apply="zk.test.indexComposer"> 

<hbox> 
    <image src="${z.resource(dir:'images', file:'grails_logo.png')}"/> 
</hbox> 

<tabbox height="100%"> 
    <tabs id="tabs"> 
    <tab id="tabinfo" label="Tab1" /> 
    </tabs> 
    <tabpanels id="tabpanel1"> 
    <tabpanel> 
     <include mode="defer" src="/js/jqplot/examples/test.html"/> 
    </tabpanel> 
    </tabpanels> 
</tabbox>

來源

2011-03-30 CJ F

這是一個時機的問題，請更換

the $(document).ready(function() {

與

zk.afterMount(function(){ 
    if (zk.mounting !== false) { 
     zk.afterMount(arguments.callee); 
     return; 
    }

來源

2011-04-06 10:57:40 jumperchen

爲什麼我的圖表（jqplot）無法呈現，直到與zk集成時按下按鈕？

回答

相關問題