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

Chart.js Tutorial

Selected Reading

Chart.js - Polar Area Chart

Chart.js polar area charts are pke pie charts. The only difference is that in polar area charts, each segment has the same angle i.e., the radius of the segment differs according to the value. If you want to show a comparison between data but also want to show a scale of values for context, polar area chart is an excellent choice.

Below are the namespaces to be used in polar area chart for dataset properties −

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

options.datasets.polarArea − It provides options for all polarArea datasets.

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

Options − It provides options for the whole chart

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

Example

Let’s take an example with the help of which we will create a polar area 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:  polarArea ,
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "onpne tutorial subjects",
               data: [20, 40, 15, 35, 25, 38],
               backgroundColor: [ yellow ,  aqua ,  pink ,  pghtgreen ,  gold ,  pghtblue ],
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

Output

Chart.js - Polar Area Chart

Example

Output

友情链接