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: {&nbsp; ticks: {&nbsp; &nbsp; ...&nbsp; &nbsp; z: 1&nbsp; }},刻度层的 z-index。在图表区域绘制刻度时很有用。值 <= 0 绘制在数据集下方，> 0 绘制在顶部。请在下面查看您修改后的代码：const chart = new Chart('myChart', {&nbsp; type: 'polarArea',&nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; labels: ['Silver', 'Palladium', 'Platinum', 'Gold'],&nbsp; &nbsp; datasets: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; label: 'Points',&nbsp; &nbsp; &nbsp; &nbsp; pointRotation: 45,&nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: ['grey', 'green', 'blue', 'yellow'],&nbsp; &nbsp; &nbsp; &nbsp; data: [3, 4, 8, 9],&nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 0,&nbsp; &nbsp; &nbsp; &nbsp; pointBackgroundColor: 'rgba(0, 0, 0, 1)'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; },&nbsp; options: {&nbsp; &nbsp; responsive: true,&nbsp; &nbsp; animation: {&nbsp; &nbsp; &nbsp; animateRotate: true&nbsp; &nbsp; },&nbsp; &nbsp; layout: {&nbsp; &nbsp; &nbsp; padding: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 0&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; scale: {&nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; fontColor: '#000000',&nbsp; &nbsp; &nbsp; &nbsp; mirror: true,&nbsp; &nbsp; &nbsp; &nbsp; z: 1&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; position: 'top'&nbsp; &nbsp; }&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script><canvas id="myChart" height="100"></canvas>