Почему мой график (jqplot) не отображается, пока я не нажму кнопку при интеграции с zk? - PullRequest
Новая
       8

Почему мой график (jqplot) не отображается, пока я не нажму кнопку при интеграции с zk?

0 голосов
/ 30 марта 2011

Я использую 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>

И моя тестовая страница зул ... 

<?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 Ответ

1 голос
/ 06 апреля 2011

это проблема синхронизации, замените 

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

на 

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