Question

我正在使用Jquery asPieProgress插件： https://github.com/thecreation/jquery-asPieProgress#options。

我有一种情况，必须根据值更改其条形颜色。我在下面累了，但这些都不起作用：

$('#id').asPieProgress({barcolor: '#2e7d32'});

$('#id').asPieProgress({data-barcolor: '#2e7d32'});

$('#id').attr('data-barcolor', '#e53935');

$('#id').attr('barcolor', '#e53935');

我们将不胜感激任何帮助/建议。

Answer 1

我通过直接在svg path元素上给出样式来修复它，如下所示：

$（'＃id .pie-progress-svg svg路径'）.attr（“ stroke”，“＃f44336”）;

Answer 2

更正确的代码：

$(document).ready(function() {
  $('.pie_progress').asPieProgress({
    namespace: 'pie_progress',
    min: 0,
    max: 100,
    goal: 100,
    size: 160,
    speed: 40, // speed of 1/100
    barcolor: '#f44306', //yellow track color 
    barsize: '4',
    trackcolor: '#f2f2f2',
    fillcolor: 'none',
    numberCallback: function(n) {
      var percentage = Math.round(this.getPercentage(n));
            if (percentage > 0 && percentage <= 49) {
                $(this.$element).find('.pie_progress__svg svg path').attr("stroke", "#fa424a");
            }
            else if (percentage >= 50 && percentage <= 79) {
                $(this.$element).find('.pie_progress__svg svg path').attr("stroke", "#fdad2a");
            }
            else {
                $(this.$element).find('.pie_progress__svg svg path').attr("stroke", "#46c35f");
            }
            return percentage + '%';
    }
  });



  $('#button_start').on('click', function() {
    $('.pie_progress').asPieProgress('start');
  });

});

Answer 3

您是对的ChupChapCharli。我认为一种更优雅的方法是添加一个功能，通过扩展插件在运行时更改条形码。

添加了一个jsfiddle示例：https://jsfiddle.net/Dave_Weernink/8zakogew/53/

$(document).ready(function() {
  $('.pie_progress').asPieProgress({
    namespace: 'pie_progress',
    min: 0,
    max: 100,
    goal: 100,
    size: 160,
    speed: 40, // speed of 1/100
    barcolor: '#f44306', //yellow track color 
    barsize: '4',
    trackcolor: '#f2f2f2',
    fillcolor: 'none',
    numberCallback: function(n) {
      var percentage = this.getPercentage(n);
      $('.pie_progress__number').text(percentage);
      if (percentage > 10 && percentage < 20) {
        $('.pie_progress svg path').attr("stroke", "#f44326");
      }
      if (percentage > 20 && percentage < 30) {
        $('.pie_progress svg path').attr("stroke", "#f44346");
      }
      if (percentage > 40 && percentage < 50) {
        $('.pie_progress svg path').attr("stroke", "#f44366");
      }
      if (percentage > 50) {
        $('.pie_progress svg path').attr("stroke", "#f44386");
      }
    },
  });



  $('#button_start').on('click', function() {
    $('.pie_progress').asPieProgress('start');
  });

});

在运行时更改Jquery asPieProgress barcolor

3 个答案: