Redraw RGraph SVG Полукруглая диаграмма - PullRequest
Новая
       8

Redraw RGraph SVG Полукруглая диаграмма

0 голосов
/ 09 февраля 2020

У меня есть веб-приложение с некоторыми графиками SVG SemiCircular RGraph. Первоначальный рисунок этих графиков SVG проходит хорошо. Некоторые из этих графиков я хочу обновить на лету с новым значением. В ответе ( Как мне перерисовать линейный сюжет RGraph SVG? ) я увидел, что сначала нужно очистить предыдущий svg, но сразу после этого запустить функцию увеличения / отрисовки не работает. График очищается, но не перерисовывается с помощью функции Grow. Вероятно, какая-то проблема asyn c. Кто-нибудь сталкивался с таким поведением раньше? Я не очень жду добавления тайм-аута или аналогичного подхода и надеюсь, что смогу решить его с помощью самого 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);

                    })
});

1 Ответ

1 голос
/ 09 февраля 2020

Я не могу повторить вашу проблему. Вы пытались использовать холст версию полукруглого индикатора выполнения? С Canvas намного проще работать, если вы спросите меня.

Перед переключением вы можете попробовать изменить свой вызов с RGraph.SVG.clear () на RGraph.SVG.reset () и посмотреть, имеет ли это какой-либо эффект .

Страница для холстовой версии: 

<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>
...