web-dev-qa-db-fra.com

Masquage des étiquettes sur l'axe des y dans Chart.js

Je dois masquer les étiquettes dans les graphiques linéaires dessinés à l'aide de la bibliothèque chart.js . J'ai googlé mais pas de chance. Cela pourrait-il être caché? 

Merci

javascriptchart.js
19
Supriya Kale

Pour masquer uniquement les étiquettes, dans la dernière version (2.3.0) de Charts.js, vous désactivez ticks comme ceci:

options: {
    scales: {
        yAxes: [{
            ticks: {
                display: false
            }
        }]
    }
}
34
Gene Parcellano

Pour la version 2, vous pouvez le faire avec l'option Scales dans la configuration globale. 

  var ctx = document.getElementById("log");
  var chart = new Chart(ctx, {
      type: 'line',
      options: {
        scales: {
          xAxes: [{
            display: false
          }],
          yAxes: [{
            display: false
          }],
        }
      },
      data: {
        labels: ['Item 1', 'Item 2', 'Item 3'],
        datasets: [{
            fill: false,
            borderWidth: 1,
            data: [10, 20, 30]
        }]
      }
    });
13
kehers

Cela cachera les étiquettes dans l’axe Y: (mais pas dans l’axe X)

    scaleShowLabels: false,
13
Alex

Résolu avec la largeur des étiquettes d'axe des ordonnées

Chart.Scale.prototype.buildYLabels = function () {
  this.yLabelWidth = 0;
};
4
Anton Grigoryev

essaye celui-là

 var statDat = {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [
        {
            fillColor: "rgba(255, 152, 0, 0.30)",
            strokeColor: "#f26b5f",
            pointColor: "#f26b5f",
            pointBackgroundColor: "rgba(179,181,198,1)",
            pointBorderColor: "#00fff5",
            pointStrokeColor: "#f26b5f",
            data: [203, 156, 99, 251, 305, 247]
        }
    ]
};

var stats = document.getElementById('stats').getContext('2d');

var options = {
    scaleShowLabels: false 
};

new Chart(stats).Line(statDat, options);
2
Charitha Goonewardena

Cela a fonctionné pour moi avec Chartjs v2.4.0

L'idée est de définir backDropColor sur une transparence totale. 255,255,255 est blanc, mais 0 le définit comme transparent.

Ensuite, userCallback retourne toujours une chaîne emptry.

Le résultat final est des étiquettes d'axe y masquées.

  ticks: {
    backdropColor : "rgba(255,255,255,0)",
    userCallback: function(value, index, values) {
      return "";
    }
  }
0
Jannunen

vous pouvez utiliser l'option scaleShowLabels

0
Tune389
Chart.defaults.scale.ticks.display = false;
0
memo
options: {
    scales: {
        yAxes: [{
            gridLines: {
              display: true,
              color: 'rgba(219,219,219,0.3)',
              zeroLineColor: 'rgba(219,219,219,0.3)',
              drawBorder: false, // <---
              lineWidth: 27,
              zeroLineWidth: 1                 
            },
            ticks: {
                beginAtZero: true,
                display: true
            }
        }]
    }
}
0
mQuiroz