剑道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},
]

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