javascript - 在进度条中使用动态数据

Question

我想弄清楚如何在 progressBar.js 的进度条中使用我自己的数据。我不确定如何将我的数据设置到代码中以使进度条以动态格式运行。

我想将 total_goals 设为 100%。然后我希望进度条根据 total_goals 完成的目标进行缩放，即:goals_completed/total_goals。然后使用我的 goal_percent 作为圆圈内的文本值。

我的值以 json 编码形式从 PHP 发送。

var total_goals = result.total_goals;
var goals_completed = result.goals_completed;
var goal_percent = result.completion_percentage;
$('#total-goals').html(total_goals);
$('#goals-completed').html(goals_completed);
$('#goal-percentage').html(goal_percent);

例如:

总进球数 = 6

目标完成 = 3

目标百分比 = 50%

 step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0);

更新

var total_goals;
var goals_completed;
var goal_percent;

    function goalBar(){
        $.ajax({ 
                url: "ajax-php/goal-bar.php",
                type: "get",
                dataType : 'json',
                success: function (result) {
                  //console.log(result);
                    if (result == "Error!") {
                        alert("Unable to retrieve goal bar info!");
                        alert(result);
                    } else {
                        total_goals = result.total_goals;
                        goals_completed = result.goals_completed;
                        goal_percent = result.completion_percentage;
                        $('#total-goals').html(total_goals);
                        $('#goals-completed').html(goals_completed);
                        $('#goal-percentage').html(goal_percent);
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    alert(textStatus + " | " + errorThrown);
                    console.log("error"); //otherwise error if status code is other than 200.
                }
            });
            //Goal Bar 

var bar = new ProgressBar.Circle('#goal-bar-container', {
  color: '#aaa',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#aaa', width: 1 },
  to: { color: '#333', width: 4 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('0');
    } else {
      circle.setText(value);
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(goals_completed/total_goals);  // Number from 0.0 to 1.0    
    }
    goalBar();

https://jsfiddle.net/kimmobrunfeldt/72tkyn40/

Answer 1

将 bar.animate(1.0); 更改为 bar.animate(goals_completed/total_goals);

该行中的值决定了圆的填充百分比。因此，您需要传入变量除以更改 1.0(等于 100%)。

https://jsfiddle.net/72tkyn40/4018/