디스플레이 검도 차트 그리드 데이터를 기반으로 (파이 차트) 내가 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