Geek asks and answers

How to change jquery easyPiechart panel color

Recently, my html guy implemented piechart using the jQuery plug-in name as easyPieChart, as follows.

enter image description here

html code:

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

I want to change the dynamic color of a stroke using JavaScript or backbone.js, but I cannot fix it.

Now it is in color green, I want to switch to another color.

can someone help me.

Thank.

+3
source share
8 answers

What I needed to figure out how to get to dynamically show the desired color based on the percentage. This is what I came up with in 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));
    }
});

This is an example of how it would look if you have several chart diagrams:

enter image description here

+13
source

, , , .

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

: http://rendro.imtqy.com/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>

. .

+1

:

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)');
},
+1

, :

    $('.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)); 
        }
    });
+1

- , . 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
    });
0

Here is my EasyPieChart function to change the percentage based pie chart. This will cause the color to become more red when it is nearing completion.

    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'
    };
Run code
0
source

to dynamically change barColor use this:

in your HTML:

<span class="easyChart" data-percent="20" data-barcolor="ffdc00"></span>

in js:

$('.easyChart').easyPieChart({
    barColor: function (percent) {
        barColor = '#767676'; // this is default barColor
        if($(this.el).data('barcolor')) {
            barColor = '#' + $(this.el).data('barcolor')
        }
        return barColor;
    },
    trackColor: '#c7c7c7',
});

You can also change trackColor

0
source

More articles:


All Articles