D3填充量规 - 是否可以通过d3本身动态更新归档圈的颜色？

Is it possible to dynamically update the color of the filing circle?

是否可以动态更新归档圈的颜色?

1 个解决方案

#1

Not only possible, but fun for all the family..

不仅可能,而且为所有家庭带来乐趣..

I have a function to set the colors eg:

我有一个设置颜色的功能,例如:

function getColor(num){
    if( num >= 9 ){
            return '#E72530';
    } else if( num >= 7 ){
            return '#EAAB0E';
    } else if( num >= 5){
            return '#FFE400';
    } else if( num >= 3 ){
            return '#187AD3';
    } else {
            return '#00ADGE';
    }
}

So, from there I have my gauge(s) which call the getColor function with a number from the returned data from getData. The getData url calls an API which returns json data. Based on this level, will change the color

所以,从那里我有我的仪表,它使用来自getData的返回数据中的数字调用getColor函数。 getData url调用返回json数据的API。基于这个级别,会改变颜色

function loadStuff(){
    $.getJSON('/getData', function(d) {
            var ccolor = getColor(d.level);
            var config1 = liquidFillGaugeDefaultSettings();
            config1.circleColor = ccolor;
            config1.textColor = "#ffffff";
            config1.waveTextColor = "#ffffff";
            config1.waveColor = ccolor;
            config1.circleThickness = 0.2;
            config1.textVertPosition = 0.2;
            config1.waveAnimateTime = 1000;
            config1.displayPercent = false;
            var gauge1 = loadLiquidFillGauge("fillgauge1", d.level*10, config1);
    });

By now you have noticed this will only work when the page is loaded. I can you thinking "what a shame", but help is at hand.

到目前为止,您已经注意到这只会在加载页面时起作用。我能让你想到“多么可耻”,但帮助就在眼前。

You can call the loadStuff function when the page is loaded, and then set a timer to do it at whatever interval you like.

您可以在加载页面时调用loadStuff函数,然后设置计时器以您喜欢的任何时间间隔执行此操作。

window.onload = function () {
    //Make sure the function fire as soon as the page is loaded
    loadStuff();

    // run the function every 60 seconds
    setInterval(function() {
            loadStuff();
    }, 60 * 1000); // 60 * 1000 milsec
}

#1