Configuración de colores de etiqueta de herramientas en un gráfico circular Kendo UI

Question

Estoy usando una llamada de .kendoChart() para crear mi propio gráfico circular.

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

Usando seriesColors: config.colors, estoy anulando el conjunto de color normal que viene con Kendo UI. El problema con esto es cuando el gráfico utiliza colores más oscuros, el color de la etiqueta en la información sobre herramientas en el flujo siempre es negro y es muy difícil de leer. Estoy buscando una forma de hacer referencia a otra matriz de color, configure los colores en unirse o algo similar a eso.

Kendo UI maneja los colores oscuros en el conjunto de colores estándar cambiando los colores de la etiqueta a blancos automáticamente, por lo que debería haber una manera de hacerlo.

He hecho algunas investigaciones, pero no puedo encontrar un buen conjunto de documentación para Kendo UI similar a lo que Microsoft generalmente libera.

Actualización:

La respuesta de

Joe fue muy útil, pero no me atrapó allí.

Usando el color: Atributo. De hecho, puedo configurar el color de texto de ToolTip en una escala global, pero ... ¿Qué pasa si tengo un amarillo claro? ¿Hay alguna manera de especificar directamente de qué color debe estar el texto en qué color de fondo?

Coloreará: aceptar una función {} o matriz de colores de alguna manera?

gracias,

---

Gracias a ROC por mostrarme exactamente lo que me faltaba!

NOTA: Utilicé 120 lumas para mi valor determinante de si usaría negro o blanco.

Answer 1

Estabas muy cerca de la solución en su pregunta, ya que puede usar un delegado de función como plantilla.Kendo ToolTip es un elemento div, por lo que simplemente devuelva un bloque HTML con el color que necesita y las siguientes herramientas serán texto blanco en el fondo oscuro o un texto negro sobre el fondo claro.

Para detectar si el fondo es demasiado oscuro, puede usar el siguiente hilo ¿Cómo verificar si el color hexagonal es" demasiado negro "? nuevamente el color de la serie del objeto" E "- E.Series.color.Utilicé una función abstracta GetColorLuma () a continuación para evitar la duplicación.

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

Pero tenga cuidado con el uso 'y # en el texto devuelto de la función de plantilla.Javascript se estrellará.Acabo de usar 'blanco' y 'negro' en mi código en lugar de colores hexagonales.

Answer 2

Puede configurar esto a través de las opciones de la información sobre herramientas (el código a continuación es de su dojo) directamente en la parte inferior, configure las siguientes herramientas en #ff0000.

La documentación es bastante sólida (si un poco incómoda para navegar)

http://docs.telerik.com/Kendo-UI / API / DATAVIZ / TRABAJO # CONFIGURACIÓN-TOOLTIPTIP.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"
            }
        });