javascript - 如何禁用 Y 轴上的标签文本但保留 Chart.js 2.6 中的网格线？

Question

使用 Chart.js 2.6 尝试将图形配置为具有网格线但 Y 轴上没有标签。这是我的配置选项:

var wowOptions = {
    scaleBeginAtZero: false,
    responsive: true,
    maintainAspectRatio: false,
    scaleStartValue: -50,
    legend: {
        display: false
    },
    scales: {
        xAxes: [{
            display: true,
            gridLines: {
                display: false,
                offsetGridLines: true,
                zeroLineColor: "red"
            },
            ticks: {
                stepSize: 4,
                autoSkip: true
            }
        }],
        yAxes: [{
            display: false,
            gridLines: {
                display: true,
                offsetGridLines: false,
                drawOnChartArea: true,
                drawBorder: false

            }
        }]

    }

当我设置 display: false 时，它​​会禁用 Y 轴上的网格线和标签:

当我为 yAxes 设置 display: true 时，我看到了 gridLines 和标签:

我试图松开标签 -50、0、50、100 但保留网格线。有办法做到这一点吗？

提前致谢，格里夫

Answer 1

您正在为 y 轴本身设置 display: false，而您需要为 y 轴的刻度设置它，就像这样...

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

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩

var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [{
         label: '# of Votes',
         data: [12, 19, 3, 5, 2, 5]
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               display: false
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>