Настройка радиолокационной карты с Chart.js

Question

Изменить: Ответ ниже был дан частично, но это помогло мне найти окончательное решение. Скрипка была обновлена ​​с тем, что я хотел.

Вот радиолокационная карта, над которой я работаю: 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 });

Мне было очень трудно найти какую-либо информацию о том, как настроить этот график, чтобы сделать следующее:

• увеличить размер шрифта текста
• изменить цвет "веб" линий
• уберите неприглядные вертикальные ящики
• измените масштаб на 1-20, чтобы 20 всегда был самым высоким уровнем в диаграмме, а не самым высоким числом в наборе данных.

Я не смог найти никакой информации в документации о том, как это сделать. У меня был некоторый успех при использовании старых версий Chart.js, но API, похоже, значительно изменился, поэтому ничего из этого не работает с последней версией Chart.js. Любая помощь будет принята с благодарностью.

Answer 1

Просто замените на:

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

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