Telerik甜甜圈圖表 - 自定義標籤

Question

我想定製Telerik甜甜圈圖表的標籤位置，它應該看起來像預期的圖像。我嘗試了幾個設置，但無法調整標籤位置，請參閱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" 
    } 
    }] 
}); 

Answer 1

我不知道任何設置您想要的特定位置的選項，但您仍然可以欺騙Telerik執行此操作。關鍵是要將標籤放置在第三個沒有背景顏色的外面甜甜圈中，並排列這些切片的值，使它們匹配現在不再需要標籤的第二個（交替灰色）甜甜圈。

$("#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方案，也可以在第二個甜甜圈中獲得灰色和微小白色分隔符的佈局等。

無論哪種方式，這是我的方式'去吧：讓你的第二個甜甜圈看起來任何你想要的方式，並使用基本上不可見的第三個甜甜圈來放置您的軸標籤。

整潔，不是嗎？