使用Chart.js配置雷达图

Question

Edit: The answer below was answered partially, but it helped me get to the final solution. The Fiddle has been updated with what I wanted.

Here's a radar chart I'm working on: 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 });

I have had a very difficult time finding any info on how to configure this chart to do the following:

• increase the font size of the text
• change the color of the "web" lines
• remove the unsightly vertical boxes
• change the scale to 1-20, so that 20 is always the highest level in the chart, not the highest number in the data set.

I've not been able to find any info in the docs on how to do any of this. I've had some success using older versions of Chart.js, but the api seems to have changed significantly so none of that works with the latest version of Chart.js. Any help would be greatly appreciated.

Answer 1

Simply replace with :

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

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