问重绘RGraph SVG SemiCircular图表
EN

Stack Overflow用户

提问于 2020-02-09 18:22:19

回答 1查看 195关注 0票数 0

我有一个带有一些SVG SemiCircular RGraph图表的SVG应用程序。这些SVG图形的初始绘制进行得很顺利。其中一些图表我想用一个新的值来动态更新。我在答案(How do I redraw an RGraph SVG line plot?)中看到，您首先需要清除前面的svg，但是在它之后直接运行增长/绘制函数并不起作用。图形将被清除，但不会使用grow函数重新绘制。可能是一些异步问题..以前有没有人遇到过这种行为？我并不期待添加超时或类似的方法，希望我可以用RGraph应用编程接口本身来解决这个问题。这就是我所拥有的：

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);

                    })
});

javascript

svg

rgraph

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-10 00:56:25

我不能复制你的问题。你试过使用画布版本的半圆形进度条吗？如果你问我，使用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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60135580

复制

相似问题

问重绘RGraph SVG SemiCircular图表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重绘RGraph SVG SemiCircular图表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重绘RGraph SVG SemiCircular图表
EN