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>
36
demandé sur giammin 2014-05-02 12:44:49

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>
68
répondu giammin 2018-07-12 15:47:28

(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
                }
            }]
        }
    }
}
13
répondu Kapytanhook 2017-05-23 11:47:04

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

}
11
répondu baligena 2015-01-16 14:55:43

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.

7
répondu Muthukannan Kanniappan 2016-05-29 17:19:00

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.

6
répondu MichaelG 2015-06-01 19:08:20

la solution la plus simple est:

scaleFontSize: 0

voir le tableau .js Document

question smilar

4
répondu 叶碧颖 2017-05-23 12:18:12

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.

3
répondu christutty 2017-04-16 21:24:37