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!
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",...],
...
}
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;
}
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
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:
- https://github.com/nnnick/Chart.js/issues/358 (le principal)
- https://github.com/nnnick/Chart.js/issues/608 (fermée sans fix)
- https://github.com/nnnick/Chart.js/issues/358