在Chart.js中隐藏y轴上的标签

Question

我需要隐藏使用库chart.js绘制的折线图中的标签.我用Google搜索但没有运气.可以隐藏吗？

谢谢

Answer 1

要隐藏标签,在Charts.js的最新版本(2.3.0)中,您将禁用ticks如下:

options: {
    scales: {
        yAxes: [{
            ticks: {
                display: false
            }
        }]
    }
}

Answer 2

对于 3.x 版本

options: {
  scales: {
    y: {
      ticks: {
        display: false,
      }
    }
  }
}

这将隐藏 y 标签。

Answer 3

对于版本2,您可以使用全局配置中的Scales选项执行此操作.

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

Answer 4

这将隐藏Y轴中的标签:(但不是X轴)

    scaleShowLabels: false,

Answer 5

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
            }
        }]
    }
}

Answer 6

Chart.defaults.scale.ticks.display = false;

Answer 7

通过覆盖 y 轴标签宽度解决了这个问题

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