Saltar al contenido

Salto de línea en la etiqueta de categoría del gráfico kendo-ui

Solución:

VER ACTUALIZACIÓN AL FINAL, ESTO AHORA ES POSIBLE … Dejando lo siguiente ya que creo que sigue siendo relevante.

Existe una alternativa si no necesita que la ubicación de la etiqueta sea “Dinámica” (es decir, hay varias etiquetas que deben tener posiciones específicas).

Puedes usar el <tspan> elemento.

Como Kendo representa el SVG de la vieja escuela en lugar del HTML5 Canvas, las etiquetas html no funcionan. Tienes que usar etiquetas SVG. Estos no son excelentes, ya que la especificación SVG 1.1 no permite el ajuste de texto fácilmente. La recomendación para el ajuste de texto en SVG es el tspan.

p.ej

<tspan x="30" dy="0" text-anchor="middle">Test</tspan>
<tspan x="30" dy="1.5em"text-anchor="middle">Other 7</tspan>

si establece lo anterior como su etiqueta, lo acercará más, pero hasta que Kendo actualice a tecnologías HTML5 como Canvas (muy poco probable), o SVG 1.2 entre (agosto de 2014) ya que esto trae <tbreak/>, esto es lo mejor que tenemos.

También hay otro problema en el hecho de que la representación del gráfico no parece tener en cuenta la representación gráfica del texto, por lo que es posible que obtenga algunos recortes no deseados.

ACTUALIZACIÓN (17/01/2014)

Según esta UserVoice http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3434807-chart-multi-line-labels

Están planeando implementar la funcionalidad en el primer trimestre de 2014, actualizaré la respuesta una vez que esté disponible de forma generalizada.

ACTUALIZACIÓN (27/04/2014)
Han dicho que esto ahora estará planeado para después de la Q1 … quién sabe cuándo ahora … oh bueno …

ACTUALIZACIÓN (01/09/2015)
Confirmado que funciona en Kendo UI v2014.3.1119 con ” n”. Ver documentación: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

Finalmente implementado por Telerik

Ver http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

El texto se puede dividir en varias líneas mediante el uso de caracteres de salto de línea (” n”).

¡Sucede con el texto, los títulos, las etiquetas y las notas en cualquier lugar!

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *