javascript - donut - kendo ui showcase

Carta Telerik Donut-Etiqueta de personalización

Question

Quiero personalizar la posición de la etiqueta de Telerik Donut Chart y debería verse como la imagen esperada. Intenté un par de configuraciones pero no pude ajustar la posición de la etiqueta. Ver imagen Poc.

Preguntas: cómo cambiar la posición de la etiqueta para que se vea como la imagen esperada. Quiero 5,10,15,20,25, ... fuera del segundo anillo y la etiqueta debe ser el final de cada categoría.

Esperado

POC

Código

$("#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

No conozco ninguna opción que establezca la ubicación particular que desea, pero puede engañar a Telerik para que lo haga de todos modos. La clave es colocar las etiquetas en una tercera rosquilla externa sin color de fondo y organizar los valores de las rodajas de forma que coincidan con la segunda rosquilla (gris alterna) que ya no necesita etiquetas.

$("#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"
}
}]
});

Ahora, por supuesto, puede reemplazar la "X" por "" para obtener una etiqueta superior vacía, puede ajustar los valores de la tercera rosquilla de forma que queden más pulcramente, puede mover el origen de 90 grados a, por ejemplo, 89.5 grados, usted puede usar el mismo esquema 9 + 1 que utilicé en el tercer donut también en el segundo donut para obtener su diseño de separadores gris-con-blanco-minúsculo, etc., etc.

De cualquier manera, así es como iría: haz que tu segunda rosquilla se vea como prefieras, y utiliza una tercera rosquilla básicamente invisible para colocar las etiquetas de tus ejes.

Limpio, ¿no?