Kendo UI 柱形图在错误的列中分组数据

Question

我在使用 KendoUI 柱形图时遇到了这个问题。我有一组从服务返回的 JSON 数据。 JSON 非常简单明了。

当我将此数据绑定到剑道图表时，没有分组，它工作得很好。但是，当我使用分组绑定它时，它会将数据放在错误的列中。由于 JSON 的大小，我将首先向您展示屏幕截图，然后是带有工作示例的 JSFiddle 链接。

没有分组的示例 1：

所有数据显示正确，列显示正确的类别和工具提示。

示例 2 WITH 分组：

如您所见，分组看起来正确，但实际上并非如此。如果您将鼠标悬停在 CCLF 类别下的第 4 列（第 1 列是 0）上，您将看到它显示 GINN，它位于图表的第 3 个类别中。

这是问题的工作示例：

http://jsfiddle.net/v8tsQ/2/

在 JSFiddle 上，如果您转到创建 kendo.data.DataSource() 的部分，您将看到“组”选项，您可以删除该选项以获得第一个图表结果。

对于我需要做些什么来确保列显示在正确的类别下有什么想法吗？

Answer 1

您的数据按照您在数据源中的顺序显示。如果您对 DataSource 进行排序，图表应显示您想要的方式。

http://jsfiddle.net/v8tsQ/10/

var ds = new kendo.data.DataSource({
    data: dr,
    group: { field: "FindingQuarter"},
    sort: [{field: "FindingQuarter", dir: "asc"}, 
    {field: "SectionName", dir: "asc"}]

})

x 轴的名称显示每组中的第一项。