javascript - Kendo UI 图表中的分组和计数

Question

我有一个数据源，我想用它按 item 分组并计算图表中的出现次数。

例如，“项目 1”的计数为 2，“项目 2”的计数为 3，“项目 3”的计数为 1。

http://jsfiddle.net/mga6f/506/

我已经尝试添加 group 但它仍然不起作用:

group: [{
    field: "item"
}],

有谁知道如何修改以下代码以执行上述功能？

var dataSource = new kendo.data.DataSource({
    data: [
        { id: 1, item: "Item 1" },
        { id: 2, item: "Item 1" },
        { id: 3, item: "Item 2" },
        { id: 4, item: "Item 2" },
        { id: 5, item: "Item 2" },
        { id: 6, item: "Item 3" }       
    ],
    group: [{
        field: "item"
    }],
    schema: {
        model: {
            id: "id",
            fields: {
                id: { type: "number", editable: false },
                value: { type: "number" },
                item: { type: "string" }                
            }
        }            
    }
});

$("#chart").kendoChart({
    dataSource: dataSource,
    autoBind: false,
    categoryAxis: {
        field: "item"   
    },
    series: [
        { field: "value", name: "Value" }
    ]        
});

dataSource.read();

Answer 1

您可以使用 fetch method在分组数据源上读取数据，然后创建一个新的项目数组及其计数:

var transformedData = [];
dataSource.fetch(function () {
  var v = this.view();
  for (var i = 0; i < v.length; i++) {
    var item = v[i].value;
    var val = v[i].items.length;
    transformedData.push({item: item, value: val});
  }
});


$("#chart").kendoChart({
    dataSource: transformedData,
    categoryAxis: {
        field: "item"   
    },
    series: [
        { field: "value", name: "Value" }
    ]        
});

已更新 FIDDLE