web-dev-qa-db-fra.com

Chart.js et longues étiquettes

J'utilise Chart.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 semble très petit.

Alors, est-il possible de casser des lignes ou d’attribuer une largeur maximale aux étiquettes?

Merci de votre aide!

chartschart.jsradar-chart
20
user2857678

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

Citation des DOC: "Utilisation: Si une étiquette est un tableau et non une chaîne, c'est-à-dire [[" juin "," 2015 "]," juillet "], chaque élément est traité comme une ligne séparée." 

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

Avec ChartJS 2.1.6 et en utilisant @ArivanBastos answer

Passez simplement votre longue étiquette à la fonction suivante, elle retournera votre étiquette sous forme de tableau, chaque élément respectant votre largeur maximale 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
Fermin Arellano

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
David Blurton

Malheureusement, il n'y a pas de solution à ce problème jusqu'à présent (5 avril 2016) . Il existe de nombreux problèmes sur Chart.js pour y remédier:

Ceci est une solution de contournement: Supprimer le libellé de l'axe des abscisses/le texte dans le fichier chart.js

1
Chocksmith

Il semble que vous parliez peut-être d’étiquettes de données et non d’étiquettes d’échelle. Dans ce cas, vous voudriez utiliser l'option pointLabelFontSize. Voir ci-dessous exemple:

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);

Enfin, vous voudrez peut-être jouer avec les dimensions de votre élément <canvas>, car j'ai parfois constaté que donner plus de hauteur au graphique en radar facilitait la mise à l'échelle automatique de tout.

0
John Kacz