在剑道 UI 图表中对数据进行分组和堆叠

Question

我有一个json数据，如下所示：

arr = [{ Name: 'PAVI', value: 3}, {Name: 'Crystal', value: 2}, {Name: 'PAVI', value: 6}, {Name: 'Crystal', value: 11}]

如何在剑道UI图表中堆叠名称相似的数据？这是我此刻的代码

$("#chart").kendoChart({
dataSource: {
data: data,
group: {
field: 'Name'
}
},
series: [{
name: "Total Sales",
field: "value",
stack: true
}],
categoryAxis: {
field: 'Name'
},

实际上这是我使用的真实数据的结构

{
Account:"Piscopo Cash and Carry"
AccountName:"Piscopo Cash and Carry"
Category:""
MainCategory:"Other"
TotalQty:146
TotalSales:9747.616
}

更新

我通过将组设置为主类别找到了解决方案(甚至不认为解决方案如此简单 XD(

Answer 1

我不确定你所说的"堆栈"是什么意思，因为有了这种数据结构，我看不出你如何堆叠它。但是，如果要对具有相同名称的值求和并显示总计，则可以使用图表中的聚合选项。

这是如何做到这一点：这将对PAVI和Crystal的值求和，并在图表中仅显示两列。

var dataSource = new kendo.data.DataSource({
data: data,
group: {
field: "Name", aggregates: [{
field: "value", aggregate: "sum"
}]
}
});

请注意"group"和"aggregate"选项。

以下是完整代码：

var data = [
{ Name: 'PAVI', value: 3 },
{ Name: 'Crystal', value: 2 },
{ Name: 'PAVI', value: 3 },
{ Name: 'Crystal', value: 10 }
];
var dataSource = new kendo.data.DataSource({
data: data,
group: {
field: "Name", aggregates: [{
field: "value", aggregate: "sum"
}]
}
});
dataSource.read();
$("#chart").kendoChart({
dataSource: getChartData(dataSource),
series: [{
type: "column",
field: "value",
categoryField: "Name"
}]
});

function getChartData(dataSource) {    
var chartData = [];
var view = dataSource.view();
for (var idx = 0; idx < view.length; idx++) {
chartData.push({
Name: view[idx].value,
value: view[idx].aggregates.value.sum
});
}
return chartData;
}

这是一个小提琴

希望对:)有所帮助如果您有任何疑问，请随时询问。