Supprimer l'étiquette/le texte de l'axe des abscisses dans le graphique.js
Comment puis-je cacher l'étiquette/le texte de l'axe des abscisses qui est affiché dans le graphique.js ?
paramètre scaleShowLabels:false
ne supprime que les étiquettes de l'axe des ordonnées.
<script>
var options = {
scaleFontColor: "#fa0",
datasetStrokeWidth: 1,
scaleShowLabels : false,
animation : false,
bezierCurve : true,
scaleStartValue: 0,
};
var lineChartData = {
labels : ["1","2","3","4","5","6","7"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [1,3,0,0,6,2,10]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);
</script>
7 réponses
UPDATE chart.js 2.1 et au-dessus de
var chart = new Chart(ctx, {
...
options:{
scales:{
xAxes: [{
display: false //this will remove all the x-axis grid lines
}]
}
}
});
var chart = new Chart(ctx, {
...
options: {
scales: {
xAxes: [{
ticks: {
display: false //this will remove only the label
}
}]
}
}
});
référence: graphique.js documentation
Vieille réponse (écrite lorsque le courant de la version 1.0 beta) juste pour la référence ci-dessous:
pour éviter d'afficher les étiquettes dans chart.js
vous devez mettre scaleShowLabels : false
et aussi éviter de passer le labels
:
<script>
var options = {
...
scaleShowLabels : false
};
var lineChartData = {
//COMMENT THIS LINE TO AVOID DISPLAYING THE LABELS
//labels : ["1","2","3","4","5","6","7"],
...
}
...
</script>
(cette question est une copie de dans le graphique.js, est-il possible de cacher l'étiquette de l'axe x/le texte du diagramme à barres si vous accédez à partir de mobile? ) Ils ont ajouté l'option, 2.1.4 (et peut-être un peu plus tôt) a
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
ticks: {
display: false
}
}]
}
}
}
var lineChartData = {
labels: ["", "", "", "", "", "", ""] // To hide horizontal labels
,datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
}
window.onload = function(){
var options = {
scaleShowLabels : false // to hide vertical lables
};
var ctx = document.getElementById("canvas1").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, options);
}
fait face à cette question de supprimer les étiquettes dans Chartjs maintenant. On dirait que la documentation est améliorée. http://www.chartjs.org/docs/#getting-started-global-chart-configuration
Chart.defaults.global.legend.display = false;
ce paramètre global empêche les légendes d'être affichées dans toutes les cartes. Comme ça me suffisait, je l'ai utilisé. Je ne suis pas sûr de comment éviter les légendes de cartes individuelles.
inspirée de la réponse de christutty, voici une solution qui modifie la source mais qui n'a pas été testée à fond. Je n'ai pas eu de problèmes pour le moment.
dans la section par défaut, ajouter cette ligne autour de la ligne 71:
// Boolean - Omit x-axis labels
omitXLabels: true,
alors autour de la ligne 2215, ajoutez ceci dans la méthode buildScale:
//if omitting x labels, replace labels with empty strings
if(Chart.defaults.global.omitXLabels){
var newLabels=[];
for(var i=0;i<labels.length;i++){
newLabels.push('');
}
labels=newLabels;
}
cela préserve aussi les pointes d'outil.
si vous voulez que les étiquettes soient conservées pour le tooltip, mais pas affichées sous les barres, le hack suivant pourrait être utile. J'ai fait ce changement pour une utilisation sur une application privée intranet et je ne l'ai pas testé pour l'efficacité ou les effets secondaires, mais il a fait ce dont j'avais besoin.
aux environs de la ligne 71 du tableau.js ajouter une propriété pour masquer les étiquettes de barre:
// Boolean - Whether to show x-axis labels
barShowLabels: true,
vers la ligne 1500 utilisez cette propriété pour supprimer ce changement.point de terminaison (il il semble que d'autres parties du code de calcul sont nécessaires car des morceaux de la carte ont disparu ou ont été rendus incorrectement si j'ai désactivé quelque chose de plus que cette ligne).
if (this.xLabelRotation > 0) {
if (this.ctx.barShowLabels) {
this.endPoint -= Math.sin(toRadians(this.xLabelRotation)) * originalLabelWidth + 3;
} else {
// don't change this.endPoint
}
}
vers la ligne 1644 utilisez la propriété pour supprimer le rendu de l'étiquette:
if (ctx.barShowLabels) {
ctx.fillText(label, 0, 0);
}
j'aimerais apporter ce changement au tableau.js source mais ne sont pas si familiers avec git et n'ont pas le temps de tester rigoureusement donc préféreraient éviter de casser quoi que ce soit.