亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Chart.js 雷達圖刻度隱藏在圖表后面

Chart.js 雷達圖刻度隱藏在圖表后面

天涯盡頭無女友 2022-12-02 17:02:40
是否可以將 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(),......這樣滴答聲就會在某種程度上可以接受地看到。但是,我寧愿讓它們完全飽和。在此先感謝您的任何建議。
查看完整描述

1 回答

?
MMTTMM

TA貢獻1869條經驗 獲得超4個贊

您可以按照此處記錄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>


查看完整回答
反對 回復 2022-12-02
  • 1 回答
  • 0 關注
  • 196 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號