重绘 RGraph SVG 半圆形图表

Question

我有一个带有一些 SVG 半圆形 RGraph 图表的网络应用程序。这些 SVG 图形的初始绘制进展顺利。其中一些图表我想用新值即时更新。我在答案 () 中看到您首先需要清除之前的 svg，但是运行紧随其后的 grow/draw 函数不起作用。该图已清除，但未使用 grow 函数重新绘制。可能是一些异步问题。以前有人遇到过这种行为吗？我不是很期待添加超时或类似的方法，希望我可以用 RGraph API 本身解决它。这是我的：

if (this._gauge){
    // If the chart has already been created then clear the SVG
    RGraph.SVG.clear(this._gauge.svg);
} else {
    // if using SVG target the div domNode instead of the canvas element
    this._gauge = new RGraph.SVG.SemiCircularProgress ({
        id: this.domNode.id,
        min: minValue,
        max: maxValue,
        value: value,
        options: this._options
    });
}
this._gauge.grow({  frames: this.easingDuration,
                    callback: dojoLang.hitch(this,function (){
                        // for no apparent reason, if multiple SVG gauges are added, the callback is only effective for one of the gauges randomly.
                        // a timeout fixes this...
                        window.setTimeout(dojoLang.hitch(this,function(){
                             this._gauge.path.onclick = dojoLang.hitch(this, function (e){
                                 this._execMF(this.onClickMF,this._contextObj.getGuid());
                             });
                             this._gauge.path.onmousemove = dojoLang.hitch(this, function (e){
                                 e.target.style.cursor = 'pointer';
                             });
                        }),1000);

                    })
});

Answer 1

我无法重现您的问题。您是否尝试过使用 canvas 版本的半圆形进度条？如果你问我，Canvas 更容易使用。

在切换之前，您可以尝试将调用从 RGraph.SVG.clear() 更改为 RGraph.SVG.reset()，看看是否有任何效果。

canvas 版本的页面是这样的：

<html>
<head>
    <script src="RGraph.common.core.js" ></script>
    <script src="RGraph.common.dynamic.js" ></script>
    <script src="RGraph.semicircularprogress.js" ></script>

    <meta name="robots" content="noindex,nofollow" />
</head>
<body>

    <canvas id="cvs" width="600" height="300">[No canvas support]</canvas>

    <script>
        scp = new RGraph.SemiCircularProgress({
            id: 'cvs',
            min: 0,
            max: 10,
            value: 8,
            options: {
            }
        }).grow(null, function ()
        {
            alert('In First grow effects callback');

        })
        //.on('click', function (e)
        //{
        //    $a('Inside the click event that sets a random value');
        //    scp.value = RGraph.random(0,10);
        //    scp.grow();
        //});

        setTimeout(function ()
        {
            scp.value = 4;
            scp.grow(null, function ()
            {
                alert('In second grow effects callback');
            });
        }, 3000);
    </script>
</body>
</html>

重绘 RGraph SVG 半圆形图表

Redraw RGraph SVG SemiCircular Chart

javascript

svg

rgraph