javascript - 添加文本 Javascript 进度条

Question

我想在我的进度条中添加一个描述文本。此描述文本应出现在栏的左上角。最好的方法是修改我的 Javascript。这应该很容易做到，但我对 js 的了解不多，我不知道该怎么做。

代码如下:

HTML:

<div id="cont"></div>

CSS:

#cont {
  margin: 10px;
  width: 100%;
  height: 5px;
  position: relative;
}

JS:

var bar = new ProgressBar.Line(cont, {
    strokeWidth: 4,
    easing: 'easeInOut',
    duration: 1400,
    color: '#ed1100',
    trailColor: '#eee',
    trailWidth: 1,
    svgStyle: {width: '100%', height: '100%'},
    text: {
      style: {
        // Text color.
        // Default: same as stroke color (options.color)
        color: '#999',
        position: 'absolute',
        right: '0',
        top: '30px',
        padding: 0,
        margin: 0,
        transform: null
      },
      autoStyleContainer: false
    },
    from: {color: '#ed1100'},
    to: {color: '#ED6A5A'},
    step: (state, bar) => {
      bar.setText(Math.round(bar.value() * 100) + ' %');
    }
  });

  bar.animate(1.0);  // Number from 0.0 to 1.0

它还使用了另一个 JS，您可以在这里找到:http://progressbarjs.readthedocs.org/en/1.0.0/

正在使用的代码: https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/

有人可以帮我添加这个描述文字吗？

Answer 1

你是说这样？ https://jsfiddle.net/k5v2d0rr/1996/

您可以使用自己的函数扩展“bar”对象:

bar.addText = function(text) {
    jQuery(this._container).append("<label>" + text + "</label>");
}

然后在加载栏后调用您的函数。

bar.animate(1.0);  // Number from 0.0 to 1.0
bar.addText("Hi");

注意:为简单起见，我添加了用于 DOM 操作的 jQuery。