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动态setText

1 个答案: