Chart.js 極地圖

極區圖類似于餅圖，但每個資料集具有相同的角度，線段的半徑根據提供的值有所不同。

混合圖 type 屬性為 polarArea。

const config = {
  type: 'polarArea',
  data: data,
  options: {}
};
      

接下來我們建立一個簡單的極地圖：

執行個體

const ctx = document.getElementById('myChart');

const data = {

  labels: [

    'Red',

    'Green',

    'Yellow',

    'Grey',

    'Blue'

  ],

  datasets: [{

    label: '極地圖執行個體',

    data: [11, 16, 7, 3, 14],

    backgroundColor: [

      'rgb(255, 99, 132)',

      'rgb(75, 192, 192)',

      'rgb(255, 205, 86)',

      'rgb(201, 203, 207)',

      'rgb(54, 162, 235)'

    ]

  }]

};

const config = {

  type: 'polarArea',

  data: data,

  options: {

    responsive: true, // 設定圖表為響應式，根據螢幕視窗變化而變化

    maintainAspectRatio: false,// 保持圖表原有比例

  }

};

const myChart = new Chart(ctx, config);

以上執行個體輸出結果為：