Kendo UI图表-可视化返回JSON字段的计数

Question

我想在饼图/甜甜圈图中显示特定检索字段的计数。 我通过REST检索数据，结果为json格式。 源是一个重复值的列表：

示例：在下面的列表中，我想获得一份完整的已完成回复的数量（计数）； 也许在第二张图表中按位置列出了响应的细分。

var userResponse  = [
      {     User:  "Bob Smith", Status: "Completed", Location: "USA" },
      {     User:  "Jim Smith", Status: "In-Progress", Location: "USA" }, 
     {     User:  "Jane Smith", Status: "Completed", Location: "USA" },
     {     User:  "Bill Smith", Status: "Completed", Location: "Japan" },
     {     User:  "Kate Smith", Status: "In-Progress", Location: "Japan" },
     {     User:  "Sam Smith", Status: "In-Progress", Location: "USA" },
 ]

我的初始化当前看起来像这样：

$('#targetChart').kendoChart({

    dataSource: {

        data: data.d.results,

        group: {

            field: "Location",
        },

    },

    seriesDefaults: {

        type: "donut",

    },

    series: [{

        field: 'Id',

        categoryField: 'Location',
    }],

});

Answer 1

您可以轻松地转换数据。 将其按位置和过滤读入DataSource对象分组仅用于完成。 然后获取数据并为每个位置创建一个计数数组：

var pieData = [];

var respDS = new kendo.data.DataSource({
  data: userResponse,
  group: {
    field: "Location",
  },
  filter: { 
    field: "Status", 
    operator: "eq", 
    value: "Completed" },
});

respDS.fetch(function(){
  var view = respDS.view();
  for (var i=0; i<view.length; i++){
    var item = {};
    item.Location = view[i].value;
    item.Count = view[i].items.length;
    pieData.push(item);
  }      
});

您最终得到：

[
  {Location: "Japan", Count: 1},
  {Location: "USA", Count: 2},
]

然后可以将其绑定到馅饼/甜甜圈。

演示