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

Question

我想在我的 pie/donut 图表中显示特定检索字段的计数。 我正在通过 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},
]

然后可以将其绑定到 pie/donut。

DEMO