javascript - 根据网格数据显示剑道图(饼图)

Question

我正在使用 KendoUI - 网格组件

如何将其转换为 Kendo Grid:

例如:我使用本地数据创建了剑道网格(表)。一旦我点击“生成图表”按钮，上面表格的过滤数据就应该创建如下所示的 Kendo 饼图...

由于我是剑道新手，有人可以建议我答案吗？

代码:

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