Impostazione dei colori dell'etichetta del tooltip su un grafico a torta dell'interfaccia utente di Kendo

Question

Sto usando una chiamata .kendoChart() per creare il mio diagramma a torta.

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

.

Utilizzo di seriesColors: config.colors Sto sovrapponendo il normale set di colori che viene fornito con Kendo UI. Il problema con questo è quando il grafico utilizza colori più scuri il colore dell'etichetta nel tooltip su Hover è sempre nero ed è molto difficile da leggere. Sto cercando un modo per fare riferimento a un'altra matrice di colori, impostare i colori su BIND o qualcosa di simile a quello.

Kendo UI gestisce i colori scuri nel set di colori standard cambiando automaticamente i colori dell'etichetta in bianco, quindi dovrebbe esserci un modo per farlo.

Ho fatto della ricerca ma non riesco a trovare una buona serie di documentazione per Kendo UI simili a ciò che Microsoft di solito rilascia.

Aggiornamento:

La risposta di Joe è stata molto utile, ma non mi ha mai preso lì.

Utilizzo del colore: Attributo Posso effettivamente impostare il colore del testo del tooltip su scala globale, ma ... cosa succede se ho un giallo chiaro? C'è un modo per specificare direttamente di che colore il testo dovrebbe essere su quale colore di sfondo?

Colore: accetta una funzione {} o array di colori in qualche modo?

Grazie,

---

.

Grazie a roc per avermi mostrato esattamente quello che mi mancava!

Nota: ho usato 120 Luma per il mio valore determinante di se usare nero o bianco.

Answer 1

Sei stato molto vicino alla soluzione nella tua domanda poiché è possibile utilizzare un delegato funzione come modello.Kendo Tooltip è un elemento div, quindi restituire un blocco HTML con il colore che ti serve e i tooltips saranno testo bianco sullo sfondo scuro o un testo nero sullo sfondo chiaro.

Per rilevare se lo sfondo è troppo scuro è possibile utilizzare il seguente thread Come controllare se il colore esagonale è" troppo nero "? di nuovo il colore della serie dall'oggetto" E "- E.Series.Color.Ho usato una funzione astratta getcolorluma () sotto per evitare la duplicazione.

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>';
    }
}

.

Ma stai attento con l'uso 'e # nel testo restituito dalla funzione del modello.JavaScript si schianterà.Ho appena usato "bianco" e 'nero' nel mio codice invece di colori esadecidi.

Answer 2

È possibile impostare questo tramite le opzioni di Tooltip (il codice seguente è dal loro dojo) direttamente in basso I Impostare i suggerimenti per #ff0000.

La documentazione è piuttosto solida (se un po 'imbarazzante per navigare)

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"
            }
        });

.