表示剣道チャートグリッドデータに基づいて（円グラフ）私はKendoUIを使用しています

Question

- 私は剣道グリッドにこれを変換することができますどのようにグリッドコンポーネント

：例：については

： 私は剣道グリッドを作成している（表）ローカルデータを使用します。 "図表"ボタンをクリックするとすぐ上の表のフィルターデータは、以下のような剣道円グラフを作成する必要があります。

私は剣道を初めて知りましたか？

コード：

var localData = [ 
    { 
    Id: 1, 
    userName: "John", 
    game: "A", 
    difficultyLevel: "Easy", 
    startTime: "25-05-2017", 
    endTime: "26-05-2017", 
    score: "210" 
    }, 
    { 
    Id: 2, 
    userName: "Sam", 
    game: "B", 
    difficultyLevel: "Hard", 
    startTime: "04-11-2016", 
    endTime: "01-12-2016", 
    score: "4800" 
    }, 
]; 

var dataSource = new kendo.data.DataSource({ 
    data: localData, 
    schema: { 
    model: { 
     fields: { 
     Id: { 
      type: "number" 
     }, 
     userName: { 
      type: "string" 
     }, 
     userName: { 
      type: "string" 
     }, 
     difficultyLevel: { 
      type: "string" 
     },   
     startTime: { 
      type: "string" 
     }, 
     endTime: { 
      type: "string" 
     }, 
     score: { 
      type: "number" 
     }, 
     } 
    } 
    } 
}); 

$("#grid").kendoGrid({ 
    dataSource: dataSource, 
    rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource), 
    scrollable: true, 
    height: 300, 
    sortable: true, 
    filterable: false, 
    groupable: true, 
    pageable: true, 
    columns: [{ 
    field: "Id", 
    title: "Id", 
    filterable: true 
    }, { 
    field: "userName", 
    title: "userName" 
    }, { 
    field: "game", 
    title: "game" 
    }, { 
    field: "difficultyLevel", 
    title: "difficultyLevel" 
    }, { 
    field: "startTime", 
    title: "startTime" 
    }, { 
    field: "endTime", 
    title: "endTime" 
    }, { 
    field: "score", 
    title: "score" 
    }] 
}); 

JsFiddle

Answer 1

あなたはグラフの形式にデータを準備する必要があります。以下のような何か：

$chartContainer.kendoChart({ 
    dataSource: { 
    data: localData, 
    schema: { 
     parse: function(data) { 
     return data.map(x => { 
      return { 
      value: Number(x.score), 
      category: x.userName 
      } 
     }); 
     } 
    } 
    }, 
    series: [{ 
    type: "pie", 
    field: "value", 
    categoryField: "category" 
    }], 
    tooltip: { 
    visible: true, 
    template: "#= category #: #= value #" 
    } 
}); 

Updated Fiddle