Diagramme radar Chart.js

Un graphique radar est un moyen d'afficher plusieurs points de données et les variations entre eux.

Un graphique radar est une méthode graphique permettant d'afficher des données multivariées sous la forme d'un graphique bidimensionnel de trois variables quantitatives ou plus représentées sur des axes partant du même point.

La position relative et l'angle des axes sont généralement peu informatifs.

Graphique mixtetypeL'attribut estradar。

const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 3 // 设置线条宽度
      }
    }
  },
};

Ensuite, créons un graphique radar simple :

Exemple

const ctx = document.getElementById('myChart');
const data = {
  labels: [
    'Manger',
    'Boire',
    'Dormir',
    'Concevoir',
    'Coder',
    'Faire du vélo',
    'Courir'
  ],
  datasets: [{
    label: 'Premier jeu de données',
    data: [65, 59, 90, 81, 56, 55, 40],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    pointBackgroundColor: 'rgb(255, 99, 132)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
  }, {
    label: 'Deuxième jeu de données',
    data: [28, 48, 40, 19, 96, 27, 100],
    fill: true,
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgb(54, 162, 235)',
    pointBackgroundColor: 'rgb(54, 162, 235)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(54, 162, 235)'
  }]
};
const config = {
  type: 'radar',
  data: data,
  options: {
    responsive: true, // Définir le graphique comme réactif, en s'adaptant à la fenêtre d'écran
    maintainAspectRatio: false,// Conserver le rapport d'aspect d'origine du graphique
    éléments: {
      line: {
        borderWidth: 3 // Définir la largeur de la ligne
      }
    }
  }
};
const myChart = new Chart(ctx, config);

Essayez-le »

La sortie de l'exemple ci-dessus est :

Autres extensions