틀:원형 그래프 | |
---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
설명
HTML의 conic-gradient를 이용해 원형 그래프를 생성하는 틀입니다.
사용법
{{원형 그래프 |정렬= |크기= |테두리= |도넛 크기= |style= |1번 색=|1번 수치= |2번 색=|2번 수치= ︙ |10번 색=|10번 수치= }}
- 현재는 10개, 즉 10번 색과 수치까지만 입력할 수 있습니다.
- 모든 수치의 합은 반드시 100이 되어야 하며 단위 없이 숫자만 입력하면 됩니다.
- 크기 변수는 선택이며 px 단위로 너비와 높이를 조정할 수 있습니다. 기본값은 200px입니다. %로도 입력할 수 있으나 권장하지 않습니다.
- 정렬 변수는 선택이며, 가운데나 오른쪽을 입력하여 위치를 조정할 수 있습니다. 기본값은 왼쪽 정렬입니다.
- 테두리 변수는 선택이며, [두께] [모양] [색깔]로 입력하여 테두리를 추가할 수 있습니다.
- 도넛 크기 변수는 선택이며, 여기에 숫자를 넣은 만큼 그래프의 중앙이 가려져 도넛 모양의 그래프로 만들 수 있습니다. 만일 그래프가 들어가는 곳의 배경색이 흰색이 아니라면 도넛 색 변수로 다른 색을 직접 정해 줄 수 있습니다.
- style 변수는 그래프 div에 들어갈 값을 추가로 입력할 수 있습니다.
사용 예제
문법 | 결과 |
---|---|
green 30%, blue 70%의 그래프
{{원형 그래프 |정렬=가운데 |크기=150px |1번 색=green|1번 수치=30 |2번 색=blue|2번 수치=70 }} |
|
green 30%, blue 45%, orange 25%의 그래프
{{원형 그래프 |정렬=가운데 |크기=150px |1번 색=green|1번 수치=30 |2번 색=blue|2번 수치=45 |3번 색=orange|3번 수치=25 }} |
|
위 그래프의 도넛 모양
{{원형 그래프 |정렬=가운데 |크기=150px |도넛 크기=30 |1번 색=green|1번 수치=30 |2번 색=blue|2번 수치=45 |3번 색=orange|3번 수치=25 }} |
|
하나의 값으로 100% 같은 색으로 합이 100이 되도록 {{원형 그래프 |정렬=가운데 |크기=150px |1번 색=green|1번 수치=50 |2번 색=green|2번 수치=50 }} |