Javascript 如何解决Chrome中的VIS Timeline组排序错误？
Chrome中有一个bug（仅限）。当超过10组（卡车）时，它会更改组的顺序 在Chrome浏览器中，卡车11显示在第一行，卡车2显示在卡车10之后。在其他浏览器中，组的顺序是正确的 如何使Chrome以正确的顺序显示组 示例： HTML代码：Javascript 如何解决Chrome中的VIS Timeline组排序错误？,javascript,google-chrome,timeline,vis.js,Javascript,Google Chrome,Timeline,Vis.js,Chrome中有一个bug（仅限）。当超过10组（卡车）时，它会更改组的顺序 在Chrome浏览器中，卡车11显示在第一行，卡车2显示在卡车10之后。在其他浏览器中，组的顺序是正确的 如何使Chrome以正确的顺序显示组 示例： HTML代码： <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script> <link
<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>
<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>
<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>
<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>
/**
*获取URL参数
* http://www.netlobo.com/url_query_string_javascript.html
*/
功能gup（名称）{
name=name.replace（/[\[]/，“\\[”）。replace（/[\]]/，“\\]”）；
var regexS=“[\\？&]”+name+“=（[^&\\]*）”；
var regex=新的RegExp（regexS）；
var results=regex.exec（window.location.href）；
如果（结果==null）
返回“”；
其他的
返回结果[1]；
}
//从url参数获取所选项目计数
变量计数=（数字（gup（‘计数’）| | 1000）；
//创建组
变量组=新的vis.DataSet([
{id:1，内容：'Truck 1'}，
{id:2，内容：'truck2'}，
{id:3，内容：'Truck 3'}，
{id:4，内容：'Truck 4'}，
{id:5，内容：'Truck 5'}，
{id:6，内容：'Truck 6'}，
{id:7，内容：'Truck 7'}，
{id:8，内容：'Truck 8'}，
{id:9，内容：'Truck 9'}，
{id:10，内容：'Truck 10'}，
{id:11，内容：'Truck 11'}，
{id:12，内容：'Truck 12'}，
{id:13，内容：'Truck 13'}，
{id:14，内容：'Truck 14'}，
{id:15，内容：'Truck 15'}，
{id:16，内容：'Truck 16'}，
{id:17，内容：'Truck 17'}，
{id:18，内容：'Truck 18'}，
{id:19，内容：'Truck 19'}，
{id:20，内容：'Truck 20'}，
{id:21，内容：'Truck 21'}
]);
//创建项目
var items=new vis.DataSet（）；
var阶数=1；
var=1；
对于（var j=0；j<21；j++）{
变量日期=新日期（）；
对于（变量i=0；i据我所知，您尚未为这些组定义任何顺序，它们的顺序尚未确定 您可以将选项groupOrder设置为“id”，使组按其id排序，或者在其中提供您自己的排序函数，或者为所有组指定属性顺序 从groupOrder上的文档： 按字段名或自定义排序函数对组进行排序。默认情况下， 组按属性顺序排序（如果已设置）。如果没有订单 如果提供了属性，则顺序将不确定
我建议您在帖子中加入一个实际问题。你是在问这是否真的是一个bug吗？你是在问如何解决这个问题吗？此外，请在问题中包含相关代码，而不是仅仅在外部网站上发布。谢谢。@Anders Bug与Chrome浏览器有关，它改变了组的顺序。我没有在这个问题上复制任何代码，因为我的代码并不重要，错误与我无关。这是一个问答论坛。你需要问一个问题。现在，你只是说有一个bug。这是一个声明，不是一个问题。请编辑您的帖子，使其包含实际问题。我很确定这个问题需要代码来回答。你为什么还要费心把代码放到外部网站上？@Anders我完成了我的问题。请帮助meI编辑问题以包含您提出的问题。由于该问题已被编辑，因此应将其添加到重新开放队列中，一旦有足够数量的人表示该问题看起来不错（我认为确实如此），该问题将重新开放。我建议您在帖子中包含一个实际问题。你是在问这是否真的是一个bug吗？你是在问如何解决这个问题吗？此外，请在问题中包含相关代码，而不是仅仅在外部网站上发布。谢谢。@Anders Bug与Chrome浏览器有关，它改变了组的顺序。我没有在这个问题上复制任何代码，因为我的代码并不重要，错误与我无关。这是一个问答论坛。你需要问一个问题。现在，你只是说有一个bug。这是一个声明，不是一个问题。请编辑您的帖子，使其包含实际问题。我很确定这个问题需要代码来回答。你为什么还要费心把代码放到外部网站上？@Anders我完成了我的问题。请帮帮我