Kendo 堆积条形图类别

Question

我得到了这种 Json 格式的数据：

var demoData = [{
    Name: 'Category_1',
    Total: 100,
    Items: [{
        Name: 'Sub_Category_1_1',
        Total: 50
        }]
    },{
    Name: 'Category_2',
    Total: 20,
    Items: [{
        Name: 'Sub_Category_2_1',
        Total: 15
        },{
        Name: 'Sub_Category_2_2',
        Total: 45
    }]
}];

我将此数据用于 kendo 堆叠条形图，但首先我解析以获得平面列表：

for (var i = 0; i < data.length; i++) {
    for (var j = 0; j < data[i].Items.length; j++) {
        dataArray.push({
            name: data[i].Items[j].Name,
            stack: data[i].Name,
            data: [data[i].Items[j].Total]
        });
    }
}

一切正常，但是，我想在栏下显示类别名称。但是当我添加

categoryAxis: {
    categories: catNames
}

其中 cats 是数组 ['Category_1', 'Category_2', ....]，碰巧所有呈现的条形图都获得名为 "Category_1" 和 "Category_2" 的类别，等等上面没有条形图。

我应该如何配置 kendo 图表以正确显示下面的类别名称？

我曾尝试将数据提供给dataSource并在内部分组而不是使用series，但我得到了类似的结果。

kendo dojo example

Answer 1

首先，您的数据看起来有些不正确，您希望您的子类别重复。每个类别应包含所有子类别，例如：

var demoData = [{
Name: 'Category_1',
Total: 100,
Items: [{
    Name: 'Sub_Category_1',
  Total: 50
},{
    Name: 'Sub_Category_2',
  Total: 45
},{
    Name: 'Sub_Category_3',
  Total: 5
},{
    Name: 'Sub_Category_4',
  Total: null
}]
},{
Name: 'Category_2',
Total: 20,
Items: [{
    Name: 'Sub_Category_1',
  Total: 15
},{
    Name: 'Sub_Category_2',
  Total: 45
},{
    Name: 'Sub_Category_3',
  Total: null
},{
    Name: 'Sub_Category_4',
  Total: null
}]
},....

您还需要通过设置数据源对数据进行分组：

var ds = new kendo.data.DataSource({
data: parsedData.seriesArray,
  group: {
    field: "name",
  },
  sort: [
    { field: "stack", dir: "asc" },
    { field: "name", dir: "asc" },
  ]
});

现在设置您的系列和类别轴：

dataSource: ds,
series: [{
    field: "data",
    stack: true,
}],
categoryAxis: {
  field: "stack",
},

最后，您不应该将 "data" 字段添加到 seriesArray:

中的数组中

data: data[i].Items[j].Total

dojo example

Kendo 堆积条形图类别

Kendo stacked bar chart categories

javascript

kendo-ui

kendo-chart