剑道UI图表中的分组和计数事件

Grouping and Counting Occurrences in Kendo UI Chart

本文关键字：事件 UI 剑道      更新时间：2023-09-26

我有一个数据源，我想用它按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();

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

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

相关文章：