Chart.js v2 React雷达图移除内部网格线数值保留外层线方法

• 你使用的x/y轴配置是Chart.js v3+版本的笛卡尔轴语法，仅适用于折线图、柱状图这类直角坐标系图表，雷达图属于极坐标类图表，不存在x/y轴，v2版本无法识别该配置，会默认尝试加载category类型的轴匹配规则，最终抛出"category" is not a registered scale.错误。
• Chart.js v2中雷达图的所有轴相关配置（网格线、刻度、轮廓线）都挂载在单数形式的scale节点下，而非v3版本的scales.r节点，属性命名也和v3有差异。

以下配置可以实现「隐藏内部网格线、隐藏刻度数值、仅保留最外层轮廓线」的效果，直接替换原有options即可：

const options = {
  scale: {
    // 隐藏所有径向刻度数值
    ticks: {
      display: false
      // 可根据业务需求自定义最大刻度、步长，避免轮廓线和数据边界不匹配
      // max: 100,
      // stepSize: 20
    },
    // 配置环形/多边形网格线
    gridLines: {
      // 先全局关闭所有网格线
      display: false,
      // 单独渲染最外层轮廓
      color: (context) => {
        // 最后一个刻度对应最外层轮廓线
        return context.index === context.ticks.length - 1 ? '#333' : 'transparent';
      },
      lineWidth: (context) => {
        return context.index === context.ticks.length - 1 ? 1 : 0;
      }
    },
    // 配置从中心延伸到顶点的放射状分隔线，不需要可设为false
    angleLines: {
      display: false
    },
    // 保留雷达图各维度的文字标签，可按需调整样式
    pointLabels: {
      fontSize: 12,
      color: '#333'
    }
  }
}

• 如果需要调整最外层轮廓的颜色、粗细，直接修改gridLines下color、lineWidth回调的返回值即可。
• 不要在雷达图配置中添加x/y轴相关配置，这类配置在v2版本的雷达图场景下完全无效，还会触发轴注册错误。
• 如果后续升级Chart.js到v3+版本，需要将scale节点改为scales.r，同时将gridLines属性名改为grid才能正常生效。

内容的提问来源于stack exchange，提问作者smartish