0
177
VisualizaçõesHow to slice a circle equally based on array length of elements ? Using react/javascript html css
Trying to create a Polar/Radar Chart, I want to create separate slices of the first circle based on the length of the array items. And print each item.name in each slice equally and text style in Arc. Circle width 720px and height 720px.
When I map through the array and print names, it creates a separate circle for each name because I am mapping outside the dev.
Any ideas, solutions are appreciated. Thanks
const items = [{ "id": 1, "name": "javascript" }, { "id": 2, "name": "HTML" }, { "id": 1, "name": "CSS" }]
const length = items?.length ?? 0
const width = 720
const slice = width / length
return (
<div>
{ items?.map(item =>
<div className={styles.circle} style={{width: `${slice}}}>
<p>{item.name}</p>
</div>
)}
</div>
)
//css
.circle {
height: 720px;
border: solid 1px #fafafa;
background: #fafafa;
border-radius: 50%;
padding: 20px;
position: relative;
}
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
You can draw your pie chart using react-google-charts easily. It supports a fair amount of options to manage the chart.
import React from "react";
import { Chart } from "react-google-charts";
const data = [
["Language", "Popularity"],
["Javascript", 1],
["HTML", 1],
["CSS", 1]
];
const options = {
legend: "none",
pieSliceText: "label",
title: "Language Popularity",
pieStartAngle: 180
};
export default function App() {
return (
<Chart
chartType="PieChart"
data={data}
options={options}
width={"100%"}
height={"400px"}
/>
);
}
·
Juan Pablo Isaza
Relatório
Responde à pergunta