Javascript 在进度条中使用动态数据

我正试图找出如何使用progressBar.js中进度条中的我自己的数据。我不知道如何将数据设置到代码中，以使进度条以动态格式运行

我想将

total\u goals

设置为100%的数字。然后我想让进度条按

total\u goals

的比例缩放到完成的目标，即：

goals\u completed

/

total\u goals

。然后使用我的

goal\u 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();

更改

条。动画（1.0）到
条。动画（目标完成/总目标）

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

更改
条。动画（1.0）到
条。动画（目标完成/总目标）

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

谢谢。你明白为什么这在我的功能中不起作用了吗？我在函数中包含了我的进度条形码，以便能够使用动态变量，但它们一直没有定义。请尝试先将变量定义为全局变量（在任何函数之外：
var goals\u completed；
等），然后在
ajax
中通过省略
var
部分来更新变量。谢谢。刚刚尝试过，现在progressBar.js文件抛出了一系列错误，因为值为null。我更新了问题中的代码，在
//目标栏
加载项
console.log（goals\u completed）
之后。这个值得到了什么？它没有定义。当我将ajax中的值分配给页面上的id时，这些值就会起作用。见图，谢谢。你明白为什么这在我的功能中不起作用了吗？我在函数中包含了我的进度条形码，以便能够使用动态变量，但它们一直没有定义。请尝试先将变量定义为全局变量（在任何函数之外：
var goals\u completed；
等），然后在
ajax
中通过省略
var
部分来更新变量。谢谢。刚刚尝试过，现在progressBar.js文件抛出了一系列错误，因为值为null。我更新了问题中的代码，在
//目标栏
加载项
console.log（goals\u completed）
之后。这个值得到了什么？它没有定义。当我将ajax中的值分配给页面上的id时，这些值就会起作用。请看图片。你能提供你的源代码吗？我也有同样的问题，我首先在ProgressBar中遇到了一些错误，比如ProgressBar.js文件中的“TypeError:element is null”，您能提供源代码吗？我也有同样的问题，我首先在ProgressBar中遇到了错误，比如ProgressBar.js文件中的“TypeError:element is null”