如何解决 Chrome 中的 VIS 时间轴组排序错误？答案

【问题标题】：How to work around VIS Timeline group ordering bug in Chrome?如何解决 Chrome 中的 VIS 时间轴组排序错误？
【发布时间】：2015-10-27 15:30:16
【问题描述】：

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&nbsp;1'},
    {id: 2, content: 'Truck&nbsp;2'},
    {id: 3, content: 'Truck&nbsp;3'},
    {id: 4, content: 'Truck&nbsp;4'},
    {id: 5, content: 'Truck&nbsp;5'},
    {id: 6, content: 'Truck&nbsp;6'},
    {id: 7, content: 'Truck&nbsp;7'},
    {id: 8, content: 'Truck&nbsp;8'},
    {id: 9, content: 'Truck&nbsp;9'},
    {id: 10, content: 'Truck&nbsp;10'},
    {id: 11, content: 'Truck&nbsp;11'},
    {id: 12, content: 'Truck&nbsp;12'},
    {id: 13, content: 'Truck&nbsp;13'},
    {id: 14, content: 'Truck&nbsp;14'},
    {id: 15, content: 'Truck&nbsp;15'},
    {id: 16, content: 'Truck&nbsp;16'},
    {id: 17, content: 'Truck&nbsp;17'},
    {id: 18, content: 'Truck&nbsp;18'},
    {id: 19, content: 'Truck&nbsp;19'},
    {id: 20, content: 'Truck&nbsp;20'},
    {id: 21, content: 'Truck&nbsp;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>

【问题讨论】：

我建议您在帖子中包含一个实际问题。您是在问这是否确实是一个错误？你问如何解决它？此外，请在问题中包含相关代码，而不是仅将其发布在外部网站上。谢谢。
@Anders Bug 与 Chrome 浏览器有关，改变了组的顺序。我没有复制这个问题中的任何代码，因为我的代码并不重要，该错误与 Vis Timeline JS 相关，而不是我的代码
这是一个问答论坛。你需要问一个问题。现在，你只是说有一个错误。这是一个陈述，而不是一个问题。请编辑您的帖子，使其包含实际问题。我很确定这个问题需要代码来回答。你为什么还要费心把代码放在外部网站上？
@Anders 我完成了我的问题。请帮帮我
我编辑了问题以包含您提出的问题。由于它已经过编辑，因此应该将其添加到重新打开队列中，并且一旦有足够多的具有足够声誉的人说它看起来不错（我认为确实如此），该问题将被重新打开。

标签： javascript google-chrome timeline vis.js

【解决方案1】：

据我所知，您尚未为组定义任何顺序，因此未确定它们的顺序。

您可以将选项 groupOrder 设置为 'id' 以使组按其 id 排序，或在此处提供您自己的排序功能，或为所有组指定属性顺序。

来自 groupOrder 上的文档：

按字段名称或自定义排序功能对组进行排序。默认情况下，组按属性顺序（如果设置）排序。如果没有订单提供了属性，顺序将不确定。

https://github.com/almende/vis/issues/1399

【讨论】：