如何在vue-chartjs的Polararea图表中隐藏区域线及百分比数字

别发愁啦，这个需求完全可以通过配置实现！因为vue-chartjs是基于Chart.js封装的，咱们直接用Chart.js的核心配置项就能搞定。

核心配置思路 #

PolarArea图表里的“区域圆形线条”其实是径向网格线，而百分比数字是刻度标签，咱们只需要在图表的options里针对性关闭它们的显示即可。

代码示例（分版本） #

如果你用的是Chart.js v2版本（对应旧版vue-chartjs）

在组件的渲染配置里添加如下选项：

import { PolarArea } from 'vue-chartjs'

export default {
  extends: PolarArea,
  mounted() {
    this.renderChart(
      {
        labels: ['示例1', '示例2', '示例3', '示例4'],
        datasets: [
          {
            data: [25, 30, 20, 25],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
          }
        ]
      },
      {
        scale: {
          ticks: {
            // 隐藏百分比数字
            display: false
          },
          gridLines: {
            // 隐藏圆形区域线
            display: false
          }
        }
      }
    )
  }
}

如果你用的是Chart.js v3+版本（对应新版vue-chartjs）

Chart.js v3+调整了配置结构，需要把scale放到scales.r下：

import { PolarArea } from 'vue-chartjs'

export default {
  extends: PolarArea,
  mounted() {
    this.renderChart(
      {
        labels: ['示例1', '示例2', '示例3', '示例4'],
        datasets: [
          {
            data: [25, 30, 20, 25],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
          }
        ]
      },
      {
        scales: {
          r: {
            ticks: {
              // 隐藏百分比数字
              display: false
            },
            grid: {
              // 隐藏圆形区域线
              display: false
            }
          }
        }
      }
    )
  }
}

小提示 #

不确定自己用的是哪个版本？可以看看项目package.json里的chart.js依赖版本号，v2开头的就是旧版，v3及以上是新版哦～

内容的提问来源于stack exchange，提问作者Juanma García