javascript - 剑道堆积条形图类别

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
    }]
}];

我将此数据用于剑道堆积条形图，但首先我解析以获得一个平面列表:

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”等上面没有栏。

我应该如何配置剑道图才能正确显示下面的类别名称？

我尝试将数据提供给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" },
  ]
});

现在设置您的系列和类别Axis:

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

最后，您不应该将“数据”字段添加到 seriesArray 中的数组中:

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

dojo example