Javascript 剑道堆叠条形图类别

我得到了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]
        });
    }
}

如果cats是数组['Category_1'、'Category_2'、…]，则所有渲染条都会获得名为Category_1的类别，而Category_2等在上面没有任何条

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

我曾尝试将数据馈送到数据源并在其中分组，而不是使用序列，但我得到了类似的结果

---

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

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",
},

最后，不应将数据字段添加到seriesArray中的数组：

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

---

你能创建一个代码笔或道场吗？剑道道场在帖子的末尾，我现在就看到了。这个怎么样：谢谢你的建议

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