Question

最近我的html人使用jquery插件-in名称实现了piechart，就像easyPieChart一样，就像以下一样。

enter image description here

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

我花了一些时间弄清楚如何让它根据百分比动态显示所需的颜色。这就是我在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));
    }
});

这是一个例子，说明如果你有多个Chart Pie，它会是什么样子：

enter image description here

Answer 2

我一直试图弄清楚这一点，经过一番愚弄，这似乎对我有用。

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

Answer 3

阅读插件主页上的文档： 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 4

代码段

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 5

如果您想要从红色动画到绿色，可以使用：

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

Answer 6

实际上你可以做这样的事情来获得饼图的动态颜色。确定你的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 7

这是我的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 8

动态更改barColor使用此：

HTML中的

：

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

你的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',
});

您也可以更改trackColor

如何更改jquery easyPiechart的条形颜色

8 个答案: