我如何更改jquery easyPiechart的条形颜色

最近，我的html代码实现了使用jQuery插件名称作为easyPieChart的饼图，就像下面的方式一样。我如何更改jquery 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的栏的颜色，但我能不能够解决这个问题。

现在它在颜色，我想换成另一种颜色。

任何人都可以帮助我。

谢谢。

来源

2014-02-18 user3279058

通过创建自己的。 .. –

我对此一无所知插件，但你有没有尝试设置style =“bacground-color：red;” – Gumbo

我不想设置背景颜色，我只是想将颜色设置为“bar”。 – user3279058

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

这真的不是那么难。尝试阅读文档。

来源

2014-02-18 18:35:45 degenerate

我想动态地分配'barcolor'，为此我尝试了以下方法。 '$（'＃biz0_loc0_percentUpdate'）。easyPieChart（{barColor：'red'}）;'.even它不起作用。 – user3279058

在同一个文档页面上，作者解释了如何更新图表。但是，我不认为你可以更新颜色，只有数据。这里是更新数据的代码：'$（'＃biz0_loc0_percentUpdate'）。data（'easyPieChart'）。update（Math.floor（100 * Math.random（）））;' - 也许存储颜色信息在'$（'＃biz0_loc0_percentUpdate'）。data（'barColor'）'中，你可以编辑该值。我不确定。 – degenerate

我一直在试图弄清楚自己和一些鬼混后，似乎是为我工作。

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

来源

2014-06-12 21:01:06 user3712498

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

来源

2014-08-08 10:04:23

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

这是它会是什么样子如果你有一个以上的图表派的例子：

enter image description here

来源

2015-05-02 11:27:56

这里是我的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' 
 
    };

来源

2016-01-13 07:20:50 Enkode

段：

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

来源

2016-02-04 23:14:21

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

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

来源

2016-07-17 23:45:10 Aram

我如何更改jquery easyPiechart的条形颜色

回答

相关问题