Javascript kendo ui堆叠条形图数据源分组不整齐

我用剑道ui创建了一个堆叠条形图，如下所示：

我的问题是，图表中的值没有按顺序排列。 在我的数据源中，我有一个“open”和一个“suspended”值，如下所示：

var data2 = [{"name":"abc","num":1,"state":"open"},
{"name":"abc","num":1,"state":"suspended"},
{"name":"def","num":2,"state":"open"},
{"name":"def","num":5,"state":"suspended"},
{"name":"ghi","num":3,"state":"open"},
{"name":"ghi","num":21,"state":"suspended"},
{"name":"jkl","num":4,"state":"open"},
{"name":"jkl","num":9,"state":"suspended"},
{"name":"mno","num":5,"state":"open"},
{"name":"mno","num":5,"state":"suspended"},
{"name":"pqr","num":6,"state":"open"},
{"name":"pqr","num":14,"state":"suspended"},
{"name":"stu","num":7,"state":"open"},
{"name":"stu","num":6,"state":"suspended"},
{"name":"vwxyz","num":8,"state":"open"},
{"name":"vwxyz","num":5,"state":"suspended"}];

所以我按数据源的状态分组，但是我没有得到与条形图上的名称对应的打开值，我不能按名称排序，因为它将停止工作

例如，我希望abc在第一行，1在堆叠条的左侧（橙色），2在右侧（红色），而我得到的vwxyz具有正确的挂起值（5）和错误的打开值（3而不是8）

---

“name”字段和“num”字段可能会更改其值。

尝试在数据源上添加name作为排序字段：

dataSource: {
    data: data2,
    group: [{
        field: "state",
        dir: "desc"
    }],
    sort: {
        field: "name",
        dir: "asc"
    }
}

---

更新的

现在更加困难。。。要求我按num值对图表进行排序。。。有一种方法可以仅按挂起的值对其进行排序，并在同一“行”上获得相应的打开值？更新@ezankert这太完美了！非常感谢你！