Gojs - canvas 中图表元素的顺序在 chrome 和 Mozilla 之间不同

Gojs - Order of Diagram elements in canvas differ between chrome and Mozilla

我有一部分的面板有形状和 svg 图像添加到图表中。 接下来是nodetemplate,然后是groupTemplate。

1] myDiagram.add( $$(go.Part, "Table",

2] myDiagram.nodeTemplate =

3] myDiagram.groupTemplate =

chrome中图表的渲染是:

Mozilla 中图表的渲染是:

为什么mozilla的底部出现红圈和文字....???

IE 和 Chrome 中的呈现相同 但与 mozilla 不同。谁能帮忙!!

谢谢

发生这种情况是因为 Chrome 的 Array.sort 不是稳定的排序。这意味着,如果您必须对元素列表进行排序,并且没有确定一个元素应该排在另一个元素之前的标准,那么生成的排序列表可能会按照与它们进来的顺序不同的顺序进行排序。

解决方案是使用一些标准对这些对象进行排序。您可以通过设置 layout's comparer function.

来做到这一点

默认情况下,比较器函数查看 Part.text,这在您的案例中未指定,因此您的每个部分都是等效的,因此 Chrome 的不稳定排序混合了它们的顺序,因为 (如果它们是等价的),它认为这无关紧要。

要解决此问题,请按您想要的顺序使用每个部分都有的东西,例如创建 data.textdata.order 或其他东西,然后使用它们进行比较:

// NOTE this assumes data.text exists!
// You could use anything as long as it describes the order
function myCompareFunction(a, b) {
  var at = a.data.text; 
  var bt = b.data.text;
  if (at < bt) return -1;
  if (at > bt) return 1;
  return 0;
}

然后在你的布局定义中添加:

        layout:
        $(go.GridLayout,
          { ....... comparer: myCompareFunction })