javascript - Progressbar.js setText dynamically -
i trying update text inside progressbar chart specific text when call function.
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); }
and call function - eg when user provides input
progressbar(progressvalue, texttodisplay);
the chart animates repeatedly call function text not update. ideas how can set text specific value needed?
if want display numerical value (eg count 10 instead of 100) can pass in value want count to:
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); }
Comments
Post a Comment