Why does my chart (jqplot) fail to render until I press a button when integrated with zk?

问题

I am using zk to display a page and as part of that I include an html/js page that holds the chart I want to display using jqplot.

If I load the html file by itself the plot shows up fine. When I include it in the zul page, it fails to show up. However there is a reset button (it resets the zoom level on the chart) that does appear. If I hit that button, the chart shows up fine.

I have no idea why this is happening or how to fix it. Does anyone have any ideas?

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>

And my test zul page...

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

回答1:

that is a timing issue, please replace

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

with

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

来源：https://stackoverflow.com/questions/5489885/why-does-my-chart-jqplot-fail-to-render-until-i-press-a-button-when-integrated

标签

javascript

jquery

jqplot