graphique donut kendo - série unique avec plusieurs étiquettes

Question

J'essaie de créer un graphique donut qui a une série, mais deux valeurs associées à chaque élément de la série, l'un est un% valeur, l'autre est une valeur monétaire. Je voudrais placer la valeur% "position: center", puis laisser le nom de la catégorie et la valeur en dollars être l'étiquette positionnée "outsideEnd" régulière.

J'ai lu la documentation telerik depuis des jours, et je suis maintenant officiellement perdu. Est-ce possible avec l'interface utilisateur pour ASP.NET MVC?

basic mockup of desired result

Answer 1

Ce n'est pas pris en charge hors de la boîte pour autant que je suis au courant. Cependant, vous pouvez utiliser la série visual property pour dessiner les segments avec du texte en haut.

Trouvez l'angle à mi-chemin entre le début et la fin, et trouvez le rayon à mi-chemin entre intérieur et extérieur. Utilisez ensuite la trigonométrie pour obtenir des coordonnées polaires (angle et rayon) aux coordonnées cartésiennes (x et y). Vous pouvez ajuster ceci pour obtenir le placement de texte que vous voulez.

e.createVisual() reçoit le segment

visual: function (e) { 
    var mid = e.startAngle + (e.endAngle - e.startAngle)/2; 
    var rad = e.innerRadius + (e.radius - e.innerRadius)/2 
    var p = polarToCartesian(e.center.x, e.center.y, rad, mid); 

    var group = new kendo.drawing.Group(); 
    var text = new kendo.drawing.Text(e.value, [p.x , p.y], { 
     fill: {color: "#111",} 
    }); 

    group.append(e.createVisual()); 
    group.append(text); 
    return group; 
} 

polaire cartésienne à:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) { 
    var angleInRadians = (angleInDegrees) * Math.PI/180.0; 

    return { 
     x: centerX + (radius * Math.cos(angleInRadians)), 
     y: centerY + (radius * Math.sin(angleInRadians)) 
    }; 
    } 

DEMO