charts - bottom - Chart.js y etiquetas largas.

charts js labels position

Question

Yo uso Chart.js para mostrar un gráfico de radar. Mi problema es que algunas etiquetas son muy largas: el gráfico no se puede mostrar o parece muy pequeño.

Entonces, ¿hay una manera de romper líneas o asignar un ancho máximo a las etiquetas?

¡Gracias por tu ayuda!

Answer 1

Con ChartJS 2.1.6 y usando la answer @ArivanBastos

Simplemente pase su etiqueta larga a la siguiente función, devolverá su etiqueta en forma de matriz, cada elemento respetando su maxWidth asignado.

/* takes a string phrase and breaks it into separate phrases 
   no bigger than ''maxwidth'', breaks are made at complete words.*/

function formatLabel(str, maxwidth){
    var sections = [];
    var words = str.split(" ");
    var temp = "";

    words.forEach(function(item, index){
        if(temp.length > 0)
        {
            var concat = temp + '' '' + item;

            if(concat.length > maxwidth){
                sections.push(temp);
                temp = "";
            }
            else{
                if(index == (words.length-1))
                {
                    sections.push(concat);
                    return;
                }
                else{
                    temp = concat;
                    return;
                }
            }
        }

        if(index == (words.length-1))
        {
            sections.push(item);
            return;
        }

        if(item.length < maxwidth) {
            temp = item;
        }
        else {
            sections.push(item);
        }

    });

    return sections;
}

Answer 2

Desafortunadamente, no hay una solución para esto hasta ahora (5 de abril de 2016). Hay varios problemas en Chart.js para lidiar con esto:

• https://github.com/nnnick/Chart.js/issues/358 (el principal)
• https://github.com/nnnick/Chart.js/issues/608 (cerrado sin corrección)
• https://github.com/nnnick/Chart.js/issues/358 (cerrado sin corrección)
• https://github.com/nnnick/Chart.js/issues/780 (cerrado sin corrección)
• https://github.com/nnnick/Chart.js/issues/752 (cerrado sin corrección)

Esta es una solución: eliminar la etiqueta / texto del eje x en chart.js

Answer 3

Para Chart.js 2.0+ puede usar una matriz como etiqueta:

Citando los DOC: "Uso: si una etiqueta es una matriz en lugar de una cadena, es decir [[" Junio ​​"," 2015 "]," Julio "], entonces cada elemento se trata como una línea separada".

var data = {
   labels: [["My", "long", "long", "long", "label"], "another label",...],
   ...
}

Answer 4

Parece que en realidad podría estar hablando de etiquetas de datos y no de etiquetas de escala. En este caso, querría usar la opción pointLabelFontSize . Vea el siguiente ejemplo:

var ctx = $("#myChart").get(0).getContext("2d");

var data = {
  labels: ["Eating", "Sleeping", "Coding"],
  datasets: [
    {
        label: "First",
        strokeColor: "#f00",
        pointColor: "#f00",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "#ccc",
        data: [45, 59, 90]
    },
    {
        label: "Second",
        strokeColor: "#00f",
        pointColor: "#00f",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "#ccc",
        data: [68, 48, 40]
    }
  ]
};

// This is the important part
var options = {
  pointLabelFontSize : 20
};

var myRadarChart = new Chart(ctx).Radar(data, options);

Finalmente, es posible que desee jugar con las dimensiones de su elemento <lienzo>, como he encontrado, a veces, darle más altura al gráfico de radar ayuda a la escala automática de todo.

Answer 5

Puede escribir una función javascript para personalizar la etiqueta: // Interpolated JS string - can access value scaleLabel: "<%=value%>",

Consulte http://www.chartjs.org/docs/#getting-started-global-chart-configuration