如何在 chartjs/vue-chartjs 上隐藏刻度标签答案

【问题标题】：how to hide tick labels on chartjs/vue-chartjs如何在 chartjs/vue-chartjs 上隐藏刻度标签
【发布时间】：2021-04-27 17:36:26
【问题描述】：

我正在尝试在以下径向图中隐藏沿轴的标签：

这是使用 vue-chartjs 的 VueJS 应用程序的一部分（截至撰写本文时，它不支持 chart.js 的第 3 版，因此最新文档不适用）

版本：

"vue-chartjs": "^3.5.1"
"chart.js": "^2.9.4"

我尝试了以下线程中提供的变体，但没有任何乐趣（但它们主要用于chart.js的最新版本：Hide labels on x-axis ChartJS

这使它消失了，但其他标签（平均误差、损失损失等）也消失了：

scale: {
      display: false
    }

Point Labels 从文档中看起来很有希望，但似乎没有效果（也许我错过了嵌套）：

pointLabels: { //should this be nested in another parent in the config?
      display: false
    }

什么是使刻度线上的数字只消失的正确配置？

【问题讨论】：

标签： chart.js vue-chartjs

【解决方案1】：

您必须在 tick 子配置中的 scale 配置中设置显示 false ，如下所示：

var options = {
  type: 'radar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scale: {

      ticks: {
        display: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

【讨论】：