Chart.js 雷达图表刻度隐藏在图表后面

Question

是否可以将 Chart.js 雷达图的“刻度”置于前台，以便它们位于图本身的顶部？

我在官方文档中没有看到任何与此问题相关的内容。

呈现这个的方法：

const chart = new Chart(ctx, {
  type: 'polarArea',
        data: {
    labels: ['Silver', 'Palladium', 'Platinum', 'Gold'],
    datasets: [
      {
        label: 'Points',
        pointRotation: 45,
        backgroundColor: [
          color(this.chartColors.grey).rgbString(),
          color(this.chartColors.green).rgbString(),
          color(this.chartColors.blue).rgbString(),
          color(this.chartColors.yellow).rgbString(),
        ],
        data: [0, 0, 0, 0],
        borderWidth: 0,
        pointBackgroundColor: 'rgba(0, 0, 0, 1)'
      }
    ],
  },
  options: {
    responsive: true,
    animation: {
      animateRotate: true
    },
    layout: {
      padding: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
      }
    },
    scale: {
      ticks: {
        fontColor: '#000000',
        mirror: true,
      }
    },
    legend: {
      position: 'top'
    },
  }
});

一种解决方法是让这些填充颜色像这样透明：

color(this.chartColors.yellow).alpha(0.5).rgbString(),

...这样刻度线在某种程度上是可以接受的。但是，我宁愿让它们完全饱和。提前感谢您的任何建议。

Answer 1

您可以将scale.ticks.z 选项定义为documented here。

scale: {
  ticks: {
    ...
    z: 1
  }
},

刻度层的z-index。在图表区域上绘制刻度时很有用。 0 绘制在顶部。

请在下面查看您修改后的代码：

const chart = new Chart('myChart', {
  type: 'polarArea',
        data: {
    labels: ['Silver', 'Palladium', 'Platinum', 'Gold'],
    datasets: [
      {
        label: 'Points',
        pointRotation: 45,
        backgroundColor: ['grey', 'green', 'blue', 'yellow'],
        data: [3, 4, 8, 9],
        borderWidth: 0,
        pointBackgroundColor: 'rgba(0, 0, 0, 1)'
      }
    ]
  },
  options: {
    responsive: true,
    animation: {
      animateRotate: true
    },
    layout: {
      padding: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
      }
    },
    scale: {
      ticks: {
        fontColor: '#000000',
        mirror: true,
        z: 1
      }
    },
    legend: {
      position: 'top'
    }
  }
});

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