javascript - 具有动态值的半圆形进度条

Question

显示half circle progress bar动态数据库值。

目前它正在显示%，但需要替换60%为like6/10

如何得到这个？

这是js小提琴链接

标签： javascriptprogress-bar

Answer 1

如果要在第一次绘制后动态更改值，则需要引用外部变量中的完整宽度。

这是使用变量的实现stepsize：

var stepsize = 100;
var bar = new ProgressBar.SemiCircle(container, {
  strokeWidth: 10,
  color: '#7DD740',
  trailColor: '#eee',
  trailWidth: 10,
  easing: 'easeInOut',
  duration: 1400,
  svgStyle: null,
  text: {
    value: '',
    alignToBottom: false
  },

  // Set default step function for all animate calls
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
    var value = Math.round(bar.value() * stepsize);
    if (value === 0) {
      bar.setText('');
    } else {
      // put here database value eg. 8/10 
      bar.setText(value + "/" + stepsize);
    }

    bar.text.style.color = state.color;
  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';


// put here percente logic out put 
bar.animate(0.6); // Number from 0.0 to 1.0

setTimeout(function() {
  stepsize = Math.ceil(22);
  bar.animate(0.5); // Number from 0.0 to 1.0
}, 3 * 1000);

#container {
  width: 200px;
  height: 100px;
}

#container2 {
  width: 200px;
  height: 100px;
}

svg {
  height: 80px;
  width: 100px;
  fill: none;
  stroke: #7DD740;
  stroke-width: 10;
  stroke-linecap: round;
  -webkit-filter: drop-shadow( -3px -2px 5px gray);
  filter: drop-shadow( -3px -2px 5px gray);
}

<link href="css/plugins/c3/c3.min.css" rel="stylesheet">
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">

<div>
  <b>User's</b>
  <div id="container"></div>
</div>