配置雷达图 w/Chart.js

Question

编辑：下面的答案只是部分回答，但它帮助我找到了最终的解决方案。 Fiddle 已更新为我想要的内容。

这是我正在处理的雷达图：https://jsfiddle.net/bigtrouble77/02p81jhr/4/

Chart.defaults.global.defaultFontColor = "#eee";

var radarData = {
  labels: [ "Passing", "Positioning", "Stickhandling", "Wristship", 
"Determination", "Acceleration", "Speed" ],
  datasets: [
   {
      label: false,
      data: [4, 6, 2, 3, 7, 9, 8],
      backgroundColor: "rgba(220,220,220,0.2)",
      borderColor: "#eee",
      borderWidth: 1
    }
  ]
};

var radarOptions = {
  responsive: true,
  maintainAspectRatio: true,
  title: {
    display: false
  },
  legend: {
    display: false,
  }
};

var ctx5 = document.getElementById("radarChart").getContext("2d");

new Chart(ctx5, { type: 'radar', data: radarData, options: radarOptions });

我很难找到有关如何配置此图表以执行以下操作的任何信息：

增加文本的字体大小
更改 "web" 行的颜色
删除难看的竖框
将比例改为 1-20，这样 20 始终是图表中的最高级别，而不是数据集中的最高数字。

我无法在文档中找到任何有关如何执行此操作的信息。我使用旧版本的 Chart.js 取得了一些成功，但 api 似乎发生了重大变化，因此 none 可以与最新版本的 Chart.js 一起使用。任何帮助将不胜感激。

Answer 1

只需替换为：

var radarOptions = {
       scale:{
         pointLabels: {
        fontSize: 20
      },
       },

  responsive: true,
  maintainAspectRatio: true,
  title: {
  display: false
  },
  legend: {
  display: false,
  }
};

配置雷达图 w/Chart.js

Configuring a Radar Chart w/Chart.js

javascript

charts

chart.js

react-chartjs

vue-chartjs