我如何更改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的條形顏色

回答

相關問題