Kendo UI Chart - 顯示返回的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

您可以輕鬆地轉換數據。將它讀入一個按位置分組的數據源對象，並僅對已完成的數據進行過濾。然後獲取數據併爲每個位置創建計數組成的數組：

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

這可以被綁定到一個餡餅/甜甜圈：

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); 
    }  
}); 

你結了。

DEMO