Progressbar.js 动态设置文本

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

Progressbar.js 动态设置文本

Progressbar.js setText dynamically

javascript

progress-bar