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>'; 
} 

ntの部分は幅のスタイルが設定されています：style="width:' + percentage + '"。

私は、vis.jsのドキュメントの例は、あなたがやったことを行うことを認めます。それは何をすべきかの特に明確な例ではありません。それを修正するバグを修正しましたhttps://github.com/almende/vis/issues/2827