Progressbar.js setText動態

Question

我試圖在調用函數時使用特定文本更新ProgressBar圖表中的文本。

JS：

var progressBarChart; 

function progressBar(progressValue, textValue){ 
    if (progressBarChart == null) { 
     progressBarChart = new ProgressBar.Circle (progress_container, { 
      color: '#aaa', 
      strokeWidth: 4, 
      trailWidth: 1, 
      easing: 'easeInOut', 
      duration: 1400, 
      text: { 
       autoStyleContainer: false 
      }, 
      from: {color: '#aaa', width: 1}, 
      to: {color: '#333', width: 4}, 
      step: function (state, circle) { 
       circle.path.setAttribute ('stroke', state.color); 
       circle.path.setAttribute ('stroke-width', state.width); 
       circle.setText (textValue) 

      } 
     }); 
     progressBarChart.text.style.fontFamily = '"Raleway", Helvetica, sans-serif'; 
     progressBarChart.text.style.fontSize = '2rem'; 
    } 
    progressBarChart.setText (textValue); 
    progressBarChart.animate(progressValue); 
} 

我呼籲這樣的功能 - 例如，當用戶提供了一些輸入

progressBar(progressValue, textToDisplay); 

圖表動畫，我多次撥打功能，但文字不更新。任何想法如何根據需要將文本設置爲特定值？

Answer 1

如果要顯示的數值（例如數到10，而不是100）可以只通過在值要計算到：

function progressBar(progressValue, totalValue){ 
    if (progressBarChart == null) { 
     progressBarChart = new ProgressBar.Circle (progress_container, { 
      color: '#aaa', 
      strokeWidth: 4, 
      trailWidth: 1, 
      easing: 'easeInOut', 
      duration: 1400, 
      text: { 
       autoStyleContainer: false 
      }, 
      from: {color: '#aaa', width: 1}, 
      to: {color: '#333', width: 4}, 
      step: function (state, circle) { 
       circle.path.setAttribute ('stroke', state.color); 
       circle.path.setAttribute ('stroke-width', state.width); 
       var value = Math.round(circle.value() * totalValue); 
       if (value === 0) { 
        circle.setText(''); 
       } else { 
        circle.setText(value); 
       } 
      } 
     }); 
     progressBarChart.text.style.fontFamily = '"Raleway", Helvetica, sans-serif'; 
     progressBarChart.text.style.fontSize = '2rem'; 
    } 
    progressBarChart.animate(progressValue); 
}