web-dev-qa-db-fra.com

Supprimer l'étiquette / le texte de l'axe des x dans chart.js

Comment masquer l'étiquette/le texte de l'axe des abscisses qui est affiché dans chart.js?

Réglage scaleShowLabels:false supprime uniquement les étiquettes d'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>
javascripthtml5chartschart.js
51
Sonny G

UPDATE chart.js 2.1 et supérieur

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: documentation chart.js

Ancienne réponse (écrite lorsque la version actuelle était 1.0 beta) juste pour référence ci-dessous:

Pour éviter l'affichage d'étiquettes dans chart.js vous devez définir scaleShowLabels : false et é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>
95
giammin

(Cette question est un doublon de Dans chart.js, est-il possible de masquer le libellé ou le texte de l’axe des abscisses en cas d’accès depuis un mobile? ) Ils ont ajouté l’option 2.1.4 (et peut-être un peu plus tôt)

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    display: false
                }
            }]
        }
    }
}
15
Kapytanhook
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
baligena

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;

ces paramètres globaux empêchent l'affichage des légendes dans tous les graphiques. Comme cela me suffisait, je l’utilisais. Je ne suis pas sûr de savoir comment éviter les légendes pour les graphiques individuels.

7
Muthukannan Kanniappan

Inspirée par la réponse de christutty, voici une solution qui modifie la source mais n’a pas été testée de manière approfondie. Je n'ai pas encore eu de problèmes cependant.

Dans la section des valeurs par défaut, ajoutez cette ligne autour de la ligne 71:

// Boolean - Omit x-axis labels
omitXLabels: true,

Puis, vers 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 également les info-bulles.

6
MichaelG

La solution la plus simple est:

scaleFontSize: 0

voir le document chart.js

question smilar

4
叶碧颖

Si vous voulez que les étiquettes soient conservées pour l'info-bulle, mais qu'elles ne s'affichent pas sous les barres, le piratage suivant peut être utile. J'ai fait cette modification pour une utilisation sur une application intranet privée et je ne l'ai pas testée pour son efficacité ou ses effets secondaires, mais elle a répondu à mes besoins.

Aux environs de la ligne 71 dans chart.js, ajoutez une propriété pour masquer les libellés de barres:

// Boolean - Whether to show x-axis labels
barShowLabels: true,

Vers la ligne 1500, utilisez cette propriété pour supprimer la modification de this.endPoint (il semble que d’autres parties du code de calcul soient nécessaires, car des morceaux du graphique ont disparu ou ont été restitués de manière incorrecte si je désactivais autre chose 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 à la source Chart.js mais je ne connais pas très bien git et je n'ai pas le temps de tester rigoureusement, je préférerais éviter de casser quoi que ce soit.

3
christutty