javascript - Kendo UI 柱形图在错误的列中对数据进行分组

Question

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

当我将这些数据绑定(bind)到 Kendo Chart 时，没有分组，它工作得很好。但是，当我使用分组绑定(bind)它时，它会将数据放在错误的列中。由于 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 轴的名称显示每组中的第一项。