Question

我正在尝试立即实施进度条，但进度条没有显示我建议的值。进度条显示总是大约55％并不重要如何设置值。

  var items = new vis.DataSet([
{id: 0, group: 0, content: 'item 0',value: 0.0, start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
{id: 1, group: 0, content: 'item 1',value: 0.2, start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
{id: 2, group: 1, content: 'item 2',value: 0.3, start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
{id: 3, group: 1, content: 'item 3',value: 0.4, start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
{id: 4, group: 1, content: 'item 4',value: 0.65, start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
{id: 5, group: 2, content: 'item 5',value: 0.8, start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}

]）;

.progress-wrapper {
  background: white;
  width: 100%;
  height: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.progress {
  height: 100%;
  width: 60%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #63ed63;
}

.progress-label {
  position: absolute;
  z-index: 1;
}

Here is my jsfiddle example

Answer 1

它显示宽度的60％，因为这是您指定的内容：

.progress {
  width: 60%;
}

如果您希望它与标签中的百分比相匹配，则必须在从模板返回的HTML中指定：

visibleFrameTemplate: function(item) {
  if (item.visibleFramTemplate) {
    return item.visibleFramTemplate;
  }
  var percentage = item.value * 100 + '%';
  return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>';
}

相关部分是为宽度设置样式的位置：style="width:' + percentage + '"。

我会承认，vis.js文档中的例子可以做你已经完成的事情 - 这不是一个特别明确的例子。提出了一个错误来修复https://github.com/almende/vis/issues/2827

vis.js进度条显示的值不正确

1 个答案: