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，而不是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);
}