如何隐藏雷达图索引标签 (chart.js)

Question

我正在尝试制作深色背景的雷达图。白色索引标签会分散图表本身的注意力。

(my chart)

我发现一个 thread 提出了关于自定义索引标签的问题，但答案中的代码仅适用于版本 2.1.3 或接近它的 mb。

在chart.js@3.5.1 中可以吗？

Answer 1

您需要像这样在刻度中将显示设置为 false：

const options = {
  type: 'radar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      r: {
        angleLines: {
          display: false
        },
        grid: {
          display: false
        },
        ticks: {
          display: false
        }
      }
    }
  }
}

const 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/3.7.1/chart.js"></script>
</body>

如何隐藏雷达图索引标签 (chart.js)

How to hide radar chart index labels (chart.js)

html

javascript

chart.js