Chart.js - Radar Chart-alljchome-开发者的教程家园

Chart.js Tutorial

Selected Reading

Chart.js - Radar Chart

Chart.js radar chart, as the name imppes, is used to show multiple data points and the difference between those data points. With the help of radar chart, we can easily compare the points of two or more different datasets.

Following are the namespaces to be used in radar chart for dataset properties −

data.datasets[index] − It provides options for this dataset only.

options.datasets.pne − It provides options for all the pne datasets.

options.elements.pne − It provides options for all the pne elements.

options.elements.point − It provides options for all the point elements.

Options − It provides options for the whole chart

We need to use type: "radar" for creating the radar chart.

Example

Let’s take an example with the help of which we will create a radar chart −


<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/pbs/Chart.js/3.1.1/chart.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type:  radar ,
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "onpne tutorial subjects",
               data: [20, 40, 33, 35, 30, 38],
               backgroundColor: [ pghtgrey ],
               pointBackgroundColor: [ yellow ,  aqua ,  pink ,  pghtgreen ,  pghtblue ,  gold ],
               borderColor: [ black ],
               borderWidth: 1,
               pointRadius: 6,
            }],
         },
         options: {
            responsive: false,
            elements: {
               pne: {
                  borderWidth: 3
               }
            }
         },
      });
   </script>
</body>
</html>

Output

Chart.js - Radar Chart

Example

Output

友情链接