Vis.js Timeline在Chrome中存在错误(仅限)。当有超过10组(卡车)时,它会改变组的顺序。
Chrome浏览器中的this exmaple浏览器 Truck 11 显示在第一行, Truck 2 显示在 Truck 10 之后。在其他浏览器中,组的顺序是正确的。
如何让Chrome以正确的顺序显示群组?
示例: http://jsfiddle.net/parhum/rcsrfaka/
HTML代码:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css">
<div id="js__timeline"></div>
JS代码:
<script>
/**
* Get URL parameter
* http://www.netlobo.com/url_query_string_javascript.html
*/
function gup( name ) {
name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
// get selected item count from url parameter
var count = (Number(gup('count')) || 1000);
// create groups
var groups = new vis.DataSet([
{id: 1, content: 'Truck 1'},
{id: 2, content: 'Truck 2'},
{id: 3, content: 'Truck 3'},
{id: 4, content: 'Truck 4'},
{id: 5, content: 'Truck 5'},
{id: 6, content: 'Truck 6'},
{id: 7, content: 'Truck 7'},
{id: 8, content: 'Truck 8'},
{id: 9, content: 'Truck 9'},
{id: 10, content: 'Truck 10'},
{id: 11, content: 'Truck 11'},
{id: 12, content: 'Truck 12'},
{id: 13, content: 'Truck 13'},
{id: 14, content: 'Truck 14'},
{id: 15, content: 'Truck 15'},
{id: 16, content: 'Truck 16'},
{id: 17, content: 'Truck 17'},
{id: 18, content: 'Truck 18'},
{id: 19, content: 'Truck 19'},
{id: 20, content: 'Truck 20'},
{id: 21, content: 'Truck 21'}
]);
// create items
var items = new vis.DataSet();
var order = 1;
var truck = 1;
for (var j = 0; j < 21; j++) {
var date = new Date();
for (var i = 0; i < count/10; i++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
items.add({
id: order,
group: truck,
start: start,
end: end,
content: 'Order ' + order
});
order++;
}
truck++;
}
// specify options
var options = {
stack: false,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true,
margin: {
item: 10, // minimal margin between items
axis: 5 // minimal margin between items and the axis
},
orientation: 'top'
};
// create a Timeline
var container = document.getElementById('js__timeline');
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
document.getElementById('count').innerHTML = count;
</script>
答案 0 :(得分:0)
据我所知,你没有为这些团体定义任何顺序,但他们的订单未定。
您可以将选项groupOrder设置为'id',使其按ID排序,或者在那里提供自己的排序功能,或者为所有组提供属性订单。
来自groupOrder上的文档:
按字段名称或自定义排序功能对组进行排序。默认情况下, 组按订单(如果已设置)排序。如果没有订单 提供属性,订单将不确定。