Полярная диаграмма Chart.js
Полярная диаграмма похожа на круговую диаграмму, но каждый набор данных имеет одинаковый угол, а радиус сегментов изменяется в соответствии с предоставленными значениями.
Смешанная диаграммаtypeСвойство —polarArea。
const config = {
type: 'polarArea',
data: data,
options: {}
};
Далее давайте создадим простую полярную диаграмму:
Пример
const ctx = document.getElementById('myChart');
const data = {
labels: [
'Красный',
'Зелёный',
'Жёлтый',
'Серый',
'Синий'
],
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);
const data = {
labels: [
'Красный',
'Зелёный',
'Жёлтый',
'Серый',
'Синий'
],
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);
Попробуйте сами »
Вывод приведенного выше примера:
Другие расширения