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

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

添加文本Javascript进度条

1 个答案: