Как расположить элементы во многих слоях этого ярусного круга, распределенных равномерно и на равном расстоянии от центр ⇐ CSS

[Anonymous]

Изображение концентрических кругов CSS, которые у меня есть
Мне нужно отображать элементы в динамическом режиме с учетом списка jsons, но мне нужно знать, как расположить все элементы в правильном положении. Я подумал сделать что-то вроде
уровня A (внутренний круг) = 20 пикселей от центра, уровня B (второй круг от центра) = 120 пикселей от центра и так далее
и расположить элементы с помощью пары (distanceFromCenter, угол) с углом, начинающимся сверху, равным 0.
Есть ли способ сделать это? или сделать это проще?

Код: Выделить всё

import React from 'react'
import styles from './test.module.css'

export default function RadarComponent() {
return (

Radar Cadmus









);
}

Код: Выделить всё

.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #000;
}

.circleOne{
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
background-color: green;
width: 700px;
height: 700px;
align-items: center;
display: flex;
justify-content: center;
}

.circleTwo{
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
background-color: rgb(128, 255, 0);
width: 550px;
height: 550px;
align-items: center;
display: flex;
justify-content: center;
}

.circleThree{
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
background-color: rgb(242, 255, 0);
width: 400px;
height: 400px;
align-items: center;
display: flex;
justify-content: center;
}

.circleFour{
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
background-color: rgb(255, 153, 0);
width: 250px;
height: 250px;
align-items: center;
display: flex;
justify-content: center;
}

Я пробовал использовать радар диаграммы Js, но проблема в том, что я не могу сделать разделы разными цветами, а один добавленный элемент в наборе данных меняет все положение всех элементов, потому что радарная диаграмма имеет относительную позиции.

Код: Выделить всё

'use client';

import React from 'react';
import { Radar } from 'react-chartjs-2';
import {
Chart as ChartJS,
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
} from 'chart.js';

ChartJS.register(
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
);

const data = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: false, // Não preencher o fundo
borderColor: 'transparent', // Tornar a linha invisível
pointBackgroundColor: '#415364', // Cor das bolinhas
pointBorderColor: '#415364',
pointHoverBackgroundColor: '#415364',
pointHoverBorderColor: '#fff',
pointRadius: 5, // Tamanho das bolinhas
}]
};

const options = {
elements: {
line: {
borderWidth: 3,
},
},
scales: {
r: {
backgroundColor: 'rgba(0, 255, 0 , 1)',
angleLines: {
display: false, //if true shows angleLines that cross with the ticks
},
grid: {
circular: true, //this allows the ticks to be circular and not polygonal
color: 'rgba(0, 0, 0, 1)',
},
ticks: { //a tick is one of the circunferences of the chart
color: 'black',
count: 5, //number of ticks
display: false, //if true show tick labels
},
pointLabels: {
font: {
size: 12,
weight: 'bold',
},
color: 'black',
},
},
},
plugins: {
legend: {
display: false
},
tooltip: {
enabled: true,
},
},
};

// Função para obter o texto do marcador
const getMarkerText = (value: number) =>  {
if (value >= 75) return 'Alto';
if (value >= 50) return 'Médio';
return 'Baixo';
};

export default function RadarComponent() {

return (



);
}

введите здесь описание изображения

Подробнее здесь: https://stackoverflow.com/questions/786 ... ibuted-eve