我得到了这种 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
,但我得到了类似的结果。
最佳答案
首先,您的数据看起来有些不正确,您希望子类别重复。每个类别应包含所有子类别,例如:
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
关于javascript - 剑道堆积条形图类别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43603509/