如何为Kendo Donut环形图组件绑定数据？e.slice报错如何解决

问题根因 #

1. 你接口返回的是单个JSON对象，但Kendo DataSource默认期望接收数组类型的数据源，调用数组专属方法slice失败触发了报错。
2. 你的series配置结构错误，且接口返回的扁平对象结构和环形图要求的分类数据结构不匹配，环形图需要每个扇区对应一条带分类、数值属性的数组项。

解决步骤 #

1. 转换接口返回数据 #

通过DataSource的schema.parse回调，将接口返回的单个对象转换为环形图需要的分类数组，同时基于total字段计算各分类的占比。

2. 修正series配置 #

移除错误的嵌套结构，直接匹配转换后的数据字段即可。

修正后完整代码 #

function createChart() {
  $("#chart").kendoChart({
    dataSource: {
      transport: {
        read: {
          url: "/ert.mvc/Summary?id=23",
          dataType: "json",
          type: "GET"
        }
      },
      // 新增schema配置处理返回数据
      schema: {
        parse: function(response) {
          const totalVal = response.total;
          // 把扁平对象转为分类数组
          return [
            {
              source: "待处理",
              value: response.pending,
              percentage: ((response.pending / totalVal) * 100).toFixed(1)
            },
            {
              source: "未完成",
              value: response.incomplete,
              percentage: ((response.incomplete / totalVal) * 100).toFixed(1)
            },
            {
              source: "新申请",
              value: response.newlyRequested,
              percentage: ((response.newlyRequested / totalVal) * 100).toFixed(1)
            },
            // 如需展示剩余已完成部分可保留下面这行，不需要直接删除即可
            {
              source: "已完成",
              value: totalVal - response.pending - response.incomplete - response.newlyRequested,
              percentage: (((totalVal - response.pending - response.incomplete - response.newlyRequested) / totalVal) * 100).toFixed(1)
            }
          ];
        }
      }
    },
    title: {
      position: "bottom",
      text: "Share of Internet Population Growth"
    },
    legend: {
      visible: false
    },
    // 修正series配置，移除错误嵌套
    series: [{
      type: "donut",
      field: "value",
      categoryField: "source",
      explodeField: "explode"
    }],
    seriesColors: ["#42a7ff", "#666666", "#ff9900", "#36c960"],
    tooltip: {
      visible: true,
      // 调整模板直接显示计算好的占比
      template: "#= category #: #= percentage #%"
    }
  });
}

内容的提问来源于stack exchange，提问作者jhgbvc