剑道堆积条形图类别答案

【问题标题】：Kendo stacked bar chart categories剑道堆积条形图类别
【发布时间】：2017-04-25 06:46:00
【问题描述】：

我得到了这种 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

【问题讨论】：

你能创建一个codepen或DOJO吗？
剑道道场在文末
我现在看到了。这个怎么样：codepen.io/ezanker/pen/vmyyzN
感谢您的建议

标签： javascript kendo-ui kendo-chart

【解决方案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",
},

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

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

dojo example

【讨论】：