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

salto de linea en jsp

Question

Tengo un cuadro donde las etiquetas contienen dos partes, un nombre y un número. Quiero que el número aparezca debajo del nombre, ilustrado con la etiqueta <br/> :

Cargué el contenido del gráfico y configuré la etiqueta en mi controlador:

Cuando trato de usar una plantilla en la etiqueta, el texto después del salto de línea aparece en la parte inferior del gráfico junto con el resto del texto del gráfico:

código javascript:

$("#chart1").kendoChart({
        theme: "BlueOpal",
        title: { text: "My reported hours" },
        legend: { position: "bottom" },
        seriesDefaults: { type: "column" },
        dataSource: {
            transport: {
                read: {
                    url: dataUrl,
                    dataType: "json"
                }
            }
        },
        series: [{ field: "SeriesField" }],
        categoryAxis: {
            field: "CategoryAxis",
            labels: {
                rotation: 0,
                template: "#=value#<br/>newline"
            },

        },
        valueAxis: {
            labels: { format: "{0}h" },
            min: 0
        },
        tooltip: {
            visible: true,
            template: "#= formatDecimal(value) #<br/> newline"
        },
        seriesClick: onSeriesClick
    });

¿Cómo hago para que el salto de línea funcione?

Answer 1

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 avance de línea ("/ n").

Ocurre a texto, títulos, etiquetas, notas ¡cualesquiera!

Answer 2

VEA ACTUALIZACIÓN AL FINAL, ESTO ES AHORA POSIBLE ... Dejando el siguiente como 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 necesitan tener posiciones específicas).

Puede usar el elemento <tspan> .

Como Kendo renderiza el SVG de la vieja escuela en lugar del HTML5 Canvas, las etiquetas html no funcionan. Tienes que usar etiquetas SVG. Estos no son geniales ya que la especificación de SVG 1.1 no permite fácilmente el ajuste de texto. 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 configura lo anterior como su etiqueta, lo acercará, pero hasta que Kendo actualice a tecnologías HTML5 como Canvas (muy improbable) o SVG 1.2 (agosto de 2014) ya que esto trae <tbreak/> , esto es sobre el 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 puede obtener un recorte no deseado.

ACTUALIZACIÓN (17/01/2014)

De acuerdo con este 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é generalmente disponible.

ACTUALIZACIÓN (27/04/2014) Han dicho que esto ahora será planeado después de la Q1 ... quién sabe cuando ... 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