时间戳

首页 > 解决方案 > Kendo UI Chart 中的分组和堆叠数据

javascript - Kendo UI Chart 中的分组和堆叠数据

问题描述

我有一个json数据，例如：

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

如何在 Kendo 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
}

更新

我通过将 group 设置为 MainCategory 找到了解决方案（甚至不认为解决方案如此简单 XD）

标签： javascriptjqueryjsonkendo-uikendo-chart

解决方案

我不确定您所说的“堆栈”是什么意思，因为使用该数据结构，我看不出任何方式可以堆叠它。但是，如果您想对具有相同名称的值求和并显示总数，则可以使用图表中的聚合选项。

操作方法如下：这将汇总 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;
}

这是一个小提琴

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

推荐阅读