티스토리에 react 이용하여 파이차트 그리기
2024. 12. 30. 10:08ㆍHTML 공부
아래는 소스입니다.
<!DOCTYPE html> <html> <head> <title>Pie Chart with React in PHP</title> <!-- React 및 ReactDOM을 불러옵니다. --> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <!-- Babel을 불러옵니다. --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> // React 컴포넌트를 정의합니다. class PieChart extends React.Component { render() { // 파이 차트를 그릴 각도를 계산합니다. const angles = [20, 30, 50]; const total = angles.reduce((acc, angle) => acc + angle, 0); const centerX = 100; const centerY = 100; const radius = 80; // 파이 차트의 각 부분을 그립니다. let startAngle = 0; let endAngle = 0; const paths = angles.map((angle, index) => { startAngle = endAngle; endAngle = startAngle + (angle / total) * 360; const startX = centerX + radius * Math.cos((startAngle - 90) * (Math.PI / 180)); const startY = centerY + radius * Math.sin((startAngle - 90) * (Math.PI / 180)); const endX = centerX + radius * Math.cos((endAngle - 90) * (Math.PI / 180)); const endY = centerY + radius * Math.sin((endAngle - 90) * (Math.PI / 180)); const largeArcFlag = angle > 180 ? 1 : 0; const pathData = `M ${centerX} ${centerY} L ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY} Z`; return <path d={pathData} fill={`hsl(${index * 60}, 70%, 50%)`} />; }); return ( <svg width="200" height="200"> {paths} </svg> ); } } // React 컴포넌트를 렌더링합니다. ReactDOM.render(<PieChart />, document.getElementById('root')); </script> </body> </html> |
'HTML 공부' 카테고리의 다른 글
| 자바 스크립트과 php 로 각각 강제로 URL 리다이렉트 하는 코드 (0) | 2024.12.30 |
|---|---|
| 티스토리 블로그에 react 이용하여 마우스로 점찍기 (1) | 2024.12.30 |
| 티스토리에 react 반영하기 연습 (2) | 2024.12.30 |
| XY 좌표 그래프 그리기 (4) | 2024.12.30 |
| 마우스 커서 위치 보여주기 (1) | 2024.12.30 |