为什么我的图表 (jqplot) 在与 zk 集成时按下按钮后才会渲染？

Question

我使用 zk 来显示页面，作为该页面的一部分，我包含一个 html/js 页面，其中包含我想要使用 jqplot 显示的图表。

如果我单独加载 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>

Answer 1

这是一个时间问题，请替换

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

为

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