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);
}