Telerik 甜甜圈图 - 自定义标签答案

【问题标题】：Telerik Donut Chart - Customization LabelTelerik 甜甜圈图 - 自定义标签
【发布时间】：2015-03-07 04:09:47
【问题描述】：

我想自定义 Telerik Donut Chart 的标签位置，它应该看起来像预期的图像。我尝试了几种设置，但无法调整标签位置，请参阅 poc 图像。

问题 - 如何更改标签位置，使其看起来像预期的图像。我想要 5,10,15,20,25, ... 在第二个环之外，标签应该是每个类别的结尾。

预期

POC

代码

$("#chart").kendoChart({
  legend: {
    visible: false
  },
  chartArea: {
    background: ""
  },
  seriesDefaults: {
    type: "donut",
    startAngle: 90,
    labels:{
      template: "#= category #",
    }
  },
  series: [{
    name: "abc",
    size:50,
    margin:2,
    data: [{
      category: "abc1",
      value: 50,
      color: "#7FBA00"
    },{
      category: "abc2",
      value: 20,
      color: "#007233"
    },{
      category: "abc3",
      value: 30,
      color: "#D2D2D2"
    }]
  }, {
    name: "xyz",
    size:10,
    data: [{
      category: "5",
      value: 10,
      color: "#ccc"
    },{
      category: "10",
      value: 10,
      color: "#AFAFAF"
    },{
      category: "15",
      value: 10,
      color: "#ccc"
    },{
      category: "20",
      value: 10,
      color: "#AFAFAF"
    },{
      category: "25",
      value: 10,
      color: "#ccc"
    },{
      category: "30",
      value: 10,
      color: "#AFAFAF"
    }],
    labels: {
      visible: true,
      background: "transparent",
      position: "center"
    }
  }]
});

【问题讨论】：

标签： javascript html telerik donut-chart

【解决方案1】：

我不知道有任何选项可以设置您想要的特定位置，但无论如何您都可以欺骗 Telerik 这样做。关键是将标签放在第三个没有背景颜色的外部甜甜圈中，并排列切片的值，使其与现在不再需要标签的第二个（交替灰色）甜甜圈相匹配。 p>

$("#chart").kendoChart({
  legend: {
    visible: false
  },
  chartArea: {
    background: ""
  },
  seriesDefaults: {
    type: "donut",
    startAngle: 90,
    labels:{
      template: "#= category #",
    }
  },
  series: [{
    name: "yourData",
    size:50,
    margin:2,
    data: [{
      category: "abc1",
      value: 50,
      color: "#7FBA00"
    },{
      category: "abc2",
      value: 20,
      color: "#007233"
    },{
      category: "abc3",
      value: 30,
      color: "#D2D2D2"
    }]
  }, {
    name: "grayAxis",
    size:10,
    data: [{
      value: 10,
      color: "#ccc"
    },{
      value: 10,
      color: "#AFAFAF"
    },{
      value: 10,
      color: "#ccc"
    },{
      value: 10,
      color: "#AFAFAF"
    },{
      value: 10,
      color: "#ccc"
    },{
      value: 10,
      color: "#AFAFAF"
    }]
  } , {
    name: "numbers",
    size:10,
    data: [{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "5",
      value: 1,
      color: "none"
    },{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "10",
      value: 1,
      color: "none"
    },{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "15",
      value: 1,
      color: "none"
    },{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "20",
      value: 1,
      color: "none"
    },{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "25",
      value: 1,
      color: "none"
    },{
      category: "",
      value: 9,
      color: "none"
    },{
      category: "X",
      value: 1,
      color: "none"
    }],
    labels: {
      visible: true,
      background: "transparent",
      template: "#= category #",
      position: "center"
    } 
  }]
});

现在，您当然可以将“X”替换为“”以获得一个空的顶部标签，您可以调整第三个甜甜圈的值以使其更整齐，您可以将原点从 90 度移动到例如89.5 度，你可以使用我在第三个甜甜圈中使用的相同的 9+1 方案，也可以在第二个甜甜圈中得到你的灰色和小白色分隔符布局等。

不管怎样，这就是我要走的路：让你的第二个甜甜圈看起来像你想要的任何样子，然后使用基本上不可见的第三个甜甜圈来放置你的轴标签。

整洁，不是吗？

【讨论】：