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的那样定义该选项。

scale: {

  ticks: {

    ...

    z: 1

  }

},

刻度层的 z-index。在图表区域绘制刻度时很有用。值 <= 0 绘制在数据集下方，> 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>