我正在使用 zk 来显示一个页面,作为其中的一部分,我包含一个 html/js 页面,其中包含我想使用 jqplot 显示的图表。
如果我自己加载 html 文件,则绘图显示得很好。当我将它包含在 zul 页面中时,它无法显示。但是,确实会出现一个重置按钮(它会重置图表上的缩放级别)。如果我按下那个按钮,图表就会显示得很好。
我不知道为什么会发生这种情况或如何解决它。有没有人有任何想法?
测试.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>