Graphique.JS et longues étiquettes

J'utilise le graphique.js pour afficher une carte Radar. Mon problème est que certaines étiquettes sont très longues : le graphique ne peut pas être affiché ou il apparaît très petit.

alors, y a-t-il un moyen de briser les lignes ou d'attribuer une largeur maximale aux étiquettes?

merci de votre aide!

18
demandé sur user2857678 2014-01-28 19:26:22

5 réponses

Pour Le Graphique.js 2.0+, vous pouvez utiliser un tableau comme étiquette:

citant les DOCs: "Usage: Si une étiquette est un tableau, par opposition à une chaîne, c'est à dire [["juin","2015"], "juillet"] ensuite, chaque élément est traité comme une autre ligne."

var data = {
   labels: [["My", "long", "long", "long", "label"], "another label",...],
   ...
}
32
répondu Arivan Bastos 2018-03-02 11:41:17

avec ChartJS 2.1.6 et en utilisant @ArivanBastos réponse

passez simplement votre étiquette longue à la fonction suivante, elle retournera votre étiquette sous une forme de tableau, chaque élément respectant votre maxWidth assignée.

/* 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;
}
15
répondu Fermin Arellano 2017-05-23 12:26:39

Vous pouvez écrire une fonction javascript pour personnaliser l'étiquette: // Interpolated JS string - can access value scaleLabel: "<%=value%>",

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

2
répondu David Blurton 2014-07-10 13:51:45

malheureusement il n'y a pas de solution pour cela jusqu'à maintenant (5 avril 2016). Il y a plusieurs problèmes sur le graphique.js pour faire face à ceci: