Как я могу изменить цвет бара jquery easyPiechart

Question

Недавно мой html парень реализовал piechart, используя имя jQuery plug-in как easyPieChart так же, как следующим образом.

HTML код:

<span class="chart pull-right" data-percent="45" id="_percentUpdate"> 
<div class="flip-container"> 
    <div class="flipper" onclick="this.classList.toggle('flipped')" id="conserHoursFlip"> 
    <div class="front percent"></div> 
    <div class="back percent"></div> 
    </div> 
</div>            
<span> 

Я хочу, чтобы динамически изменять цвет бар через JavaScript или Backbone.js, но я не могу в состоянии исправить это.

Прямо сейчас, в green цвет, я хочу изменить на другой цвет.

может кто-нибудь мне помочь.

Спасибо.

Answer 1

Прочитайте документацию на плагин странице: http://rendro.github.io/easy-pie-chart/

При инициализации плагина с JQuery, вы можете установить пользовательские параметры, такие как barColor.

Таким образом, вместо значения по умолчанию:

<script type="text/javascript"> 
$(function() { 
    $('.chart').easyPieChart({ 
     //your configuration goes here 
    }); 
}); 
</script> 

Вы можете сделать:

<script type="text/javascript"> 
$(function() { 
    $('.chart').easyPieChart({ 
     barColor: '#000' 
    }); 
}); 
</script> 

Это действительно не так сложно. Попробуйте прочитать документацию.

Answer 2

Я пытался понять это сам, и после некоторого дурака вокруг этого, похоже, работает на меня.

$('#your_chart').data('easyPieChart').options.barColor = '#0033CC'; 

Answer 3

На самом деле вы можете сделать что-то подобное, чтобы получить динамические цвета на круговой диаграмме. Задайте свой диапазон dynaVal между 0 и 50. Предустановите несколько цветов, чтобы получить динамические цвета.

var dynaColorsSet = [ 
        "#FFFFFF", // red 
        "#070AEB", // blue 
        "#1DEB07", // green 
        "#FAF211", // yellow 
        "#F76F30" // orange 
        ]; 

$('#chart').easyPieChart({ 
      barColor: function(dynaVal) { // dynaVal (can be int/float) is the dynamic value that keep changing 
        var clr = function(dynaColorsSet, dynaVal){ 
         var defColor = dynaColorsSet[0]; 
          if(dynaVal <= 20){ 
           defColor = dynaColorsSet[1]; 
          }else if(dynaVal <= 30){ 
           defColor = dynaColorsSet[2]; 
          }else if(dynaVal >= 30 && dynaVal < 40){ 
           defColor = dynaColorsSet[3]; 
          } else if(dynaVal >= 40){ 
           defColor = dynaColorsSet[4]; 
          } 
         } 
         return defColor; 
        }; 
        return clr(dynaColorsSet, dynaVal); // this line returns the final 
    }); 

Answer 4

Что мне понадобилось, чтобы выяснить, как заставить динамически показывать желаемый цвет по проценту. Это то, что я придумал в JQuery:

$('.piechart').easyPieChart({ 
    barColor: function (percent) { 
     return (percent < 50 ? '#5cb85c' : percent < 85 ? '#f0ad4e' : '#cb3935'); 
    }, 
    size: 150, 
    scaleLength: 7, 
    trackWidth: 5, 
    lineWidth: 5, 

    onStep: function (from, to, percent) { 
     $(this.el).find('.percent').text(Math.round(percent)); 
    } 
}); 

Это пример того, как это будет выглядеть, как в случае, если у вас есть более чем одна диаграмма Круговая:

Answer 5

Вот мой EasyPieChart чтобы изменить круговую диаграмму на основе процента. Это приведет к тому, что цвет станет больше красного, когда он приближается к завершению.

var chartColors = function(percent) { 
 
     var dynaColorsSet = ['#fcfcad', '#F8F933', '#FACC00', '#FB6600', '#FB9900', '#FB4800', '#CB0A0A', '#960808']; 
 
     if (percent <= 5) { 
 
     return dynaColorsSet[0]; 
 
     } else if (percent <= 15) { 
 
     return dynaColorsSet[1]; 
 
     } else if (percent <= 30) { 
 
     return dynaColorsSet[2]; 
 
     } else if (percent <= 45) { 
 
     return dynaColorsSet[3]; 
 
     } else if (percent <= 60) { 
 
     return dynaColorsSet[4]; 
 
     } else if (percent <= 75) { 
 
     return dynaColorsSet[5]; 
 
     } else if (percent <= 85) { 
 
     return dynaColorsSet[6]; 
 
     } else if (percent > 95) { 
 
     return dynaColorsSet[7]; 
 
     } 
 
    }; 
 

 
    $scope.options = { 
 
     size: 50, 
 
     animate:{ 
 
     duration:3000, 
 
     enabled:true 
 
     }, 
 
     barColor: chartColors, 
 
     scaleColor: false, 
 
     lineWidth: 5, 
 
     lineCap: 'circle' 
 
    };

Answer 6

Snippet:

barColor: function (percent) { 
    return (percent < 50 ? 'rgba('+(92+Math.ceil(148/50*percent))+','+(184-Math.ceil(11/50*percent))+','+(92-Math.ceil(14/50*percent))+',1)' : 
    percent < 100 ? 'rgba('+(240-Math.ceil(37/50*(percent-50)))+','+(173-Math.ceil(116/50*(percent-50)))+','+(78-Math.ceil(25/50*(percent-50)))+',1)' : 
    'rgba(203,57,53,1)'); 
}, 

Answer 7

Если вы хотите анимировать от красного до зеленого, вы можете использовать это:

$('.chart').easyPieChart({ 
     barColor: function (percent) { 
      return 'hsl(' + (Math.round(percent) * 1.2) + ', 100%, 35%)'; 
     }, 
     animate: { 
      duration: 2000, 
      enabled: true, 
     }, 
     onStep: function(from, to, percent) { 
      $(this.el).find('.percent').text(Math.round(percent)); 
     } 
    });