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

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 进度条没有显示正确的值

vis.js progress bar does not show correct value

css

vis.js