当我导航回页面时,不重绘RGraph画布

时间:2014-02-12 12:27:15

标签: javascript rgraph

我正在使用RGRaph.gauge和.thermometer插件。

当我第一次打开页面时,所有内容都正确显示。

但是如果我将跳转到另一个页面部分然后返回页面,则画布为空。

刷新也不起作用。必须按CTRL + F5才能重新加载没有缓存的页面。

我播种可能的解决方案可能是RGraph.ObjectRegistry.Clear();的使用,但我不确定何时调用它。

这是我的初始代码:

<!-- Include the RGraph libraries -->
<script src="ui/RGraph/libraries/RGraph.common.core.js" ></script>
<script src="ui/RGraph/libraries/RGraph.gauge.js" ></script>
<!--[if lt IE 9]><script src="ui/RGraph/excanvas/excanvas.js"></script><![endif]-->

脚本和DIV:

<script>
    function PRODgauge (PROD)
    {
        var gauge = new RGraph.Gauge('cvsPROD', 0,20,PROD)

        .Set('units.post', ' K')
        .Set('shadow', false)
        .Set('zoom.shadow', false) 
        .Set('zoom.fade.in', false) 
        .Set('zoom.fade.out', false) 
        .Draw();    

        var s = document.getElementById('PRODvalue');
        s.innerHTML = PROD + ' K';
    }

    function UATgauge (UAT)
    {
        var gauge = new RGraph.Gauge('cvsUAT', 0,20,UAT)

        .Set('units.post', ' K')
        .Set('shadow', false)
        .Set('zoom.shadow', false) 
        .Set('zoom.fade.in', false) 
        .Set('zoom.fade.out', false) 
        .Draw();    

        var s = document.getElementById('UATvalue');
        s.innerHTML = UAT + ' K';
    }

    window.onload = function () {           
        RGraph.AJAX.getNumber('pages/home/last_15min_PROD_data.jsp', PRODgauge);
        RGraph.AJAX.getNumber('pages/home/last_15min_UAT_data.jsp', UATgauge);
        setTimeout(window.onload, 300000);      
    }
</script>

<div id="stats-content">
 <div id="chart1" style="display: inline-block;"></div>
 <div id="chart2" style="display: inline-block;"></div>
 <div id="chart3" style="display: inline-block;"><canvas id="cvsPROD" height="200" width="200">[No canvas support]</canvas><h3 style="position: relative; text-align: center; top: -45px;">PROD</h3><h2 style="text-align: center; position: relative; top: -45px;"><span id="PRODvalue"></span>
 </div>
 <div id="chart4" style="display: inline-block;">
        <canvas id="cvsUAT" height="200" width="200">[No canvas support]</canvas>
        <h3 style="position: relative; text-align: center; top: -45px;">UAT</h3>
        <h2 style="text-align: center; position: relative; top: -45px;"><span id="UATvalue"></span>
 </div>
</div>  

非常感谢你 雷迪

1 个答案:

答案 0 :(得分:0)

您的图表似乎正常。如果它是你正在谈论的IE7 / 8(我不需要测试),我建议你也尝试更改你的计时器以简单刷新页面 - 首先尝试将间隔更改为5000。

http://www.rgraph.net/fiddle/view/two-gauge-charts