Définition des couleurs d'étiquette d'info-bulle sur un graphique à secteurs KendoUI

Question

J'utilise un .kendoChart() appelez-moi pour créer moi-même un diagramme circulaire.

seriesColors: config.colors,
tooltip: {
    visible: true,
    template: function (e) {
        return shared.AssetClassName(e.category) + ' ' + shared.toString(e.percentage, "p0");
    }
}

En utilisant seriesColors: config.colors Je remplace le jeu de couleurs normal fourni avec Kendo UI.Le problème est que lorsque le graphique utilise des couleurs plus sombres, la couleur de l'étiquette dans l'info-bulle au survol est toujours noire et est très difficile à lire.Je cherche un moyen de référencer une autre gamme de couleurs, de définir les couleurs lors de la liaison ou quelque chose de similaire.

Kendo UI gère les couleurs sombres dans le jeu de couleurs standard en changeant automatiquement les couleurs de l'étiquette en blanc, il devrait donc y avoir un moyen de le faire.

J'ai fait quelques recherches mais je ne trouve pas de bonne documentation pour l'interface utilisateur de Kendo similaire à celle que Microsoft publie habituellement.

Mise à jour:

La réponse de Joe a été très utile, mais elle ne m'a pas vraiment permis d'y parvenir.

Utilisation de la couleur :attribut, je peux en effet définir la couleur du texte ToolTip à l'échelle globale, mais...et si j'ai un jaune clair ?Existe-t-il un moyen de spécifier directement de quelle couleur le texte doit être sur quelle couleur d'arrière-plan ?

Coloriera :accepter une fonction {} ou un tableau de couleurs d'une manière ou d'une autre ?

Merci,

---

Merci à Roc de m'avoir montré exactement ce qui me manquait !

Note:J'ai utilisé 120 luma pour déterminer si j'utiliserais le noir ou le blanc.

Answer 1

Vous étiez très proche de la solution à votre question puisque vous pouvez utiliser un délégué de fonction comme modèle.L'info-bulle de Kendo est un élément div, il suffit donc de renvoyer un bloc HTML avec la couleur dont vous avez besoin et les info-bulles seront du texte blanc sur fond sombre ou un texte noir sur fond clair.

Pour détecter si l'arrière-plan est trop sombre, vous pouvez utiliser le fil de discussion suivant Comment vérifier si la couleur hexadécimale est « trop noire » ? contre la couleur de la série de l'objet "e" - e.series.color.J'ai utilisé une fonction abstraite getColorLuma() ci-dessous pour éviter la duplication.

seriesColors: config.colors,
tooltip: {
    visible: true,
    template: function (e) {
        var textColor = getColorLuma(e.series.color) < 128 ? 'white' : 'black';
        return '<span style="color:' + textColor + '">' +  
          shared.AssetClassName(e.category) + ' ' + shared.toString(e.percentage, "p0") +
          '</span>';
    }
}

Mais soyez prudent avec l'utilisation de ' et # dans le texte renvoyé par la fonction modèle.Javascript va planter.J'ai juste utilisé « blanc » et « noir » dans mon code au lieu des couleurs hexadécimales.

Answer 2

Vous pouvez définir cela via les options d'info-bulle (le code ci-dessous provient de leur dojo) juste en bas, je règle les info-bulles sur #ff0000.

La documentation est assez solide (même si elle est un peu difficile à naviguer)

http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-tooltip.background

        $("#chart").kendoChart({
            title: {
                position: "bottom",
                text: "Share of Internet Population Growth, 2007 - 2012"
            },
            legend: {
                visible: false
            },
            chartArea: {
                background: ""
            },
            seriesDefaults: {
                labels: {
                    visible: true,
                    background: "transparent",
                    template: "#= category #: \n #= value#%"
                }
            },
            series: [{
                type: "pie",
                startAngle: 150,
                data: [{
                    category: "Asia",
                    value: 53.8,
                    color: "#9de219"
                },{
                    category: "Europe",
                    value: 16.1,
                    color: "#90cc38"
                },{
                    category: "Latin America",
                    value: 11.3,
                    color: "#068c35"
                },{
                    category: "Africa",
                    value: 9.6,
                    color: "#006634"
                },{
                    category: "Middle East",
                    value: 5.2,
                    color: "#004d38"
                },{
                    category: "North America",
                    value: 3.6,
                    color: "#033939"
                }]
            }],
            tooltip: {
                visible: true,
                format: "{0}%",
              background: "#ff0000"
            }
        });