편집 요약 없음 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
{{namucat|김찬/제작한 틀}} | {{namucat|김찬/제작한 틀}} | ||
{{틀 도움}} | {{틀 도움}} | ||
<onlyinclude><includeonly><div style="margin: 12px 0; {{#switch:{{{정렬|}}}|가운데 = text-align: center;|오른쪽 = text-align: right;|text-align: left;}}"><div style="{{{style|}}} display: inline-block; width: {{{크기|200px}}}; height: {{{크기|200px}}}; {{#if:{{{테두리|}}}|border: {{{테두리|}}};|}} border-radius: 50%; background: <!-- | <onlyinclude><includeonly><div style="margin: 12px 0; {{#switch:{{{정렬|}}}|가운데 = text-align: center;|오른쪽 = text-align: right;|text-align: left;}}"><div style="{{{style|}}} display: inline-block; width: {{{크기|200px}}}; height: {{{크기|200px}}}; {{#if:{{{테두리|}}}|border: {{{테두리|}}};|}} border-radius: 50%; background: {{#if:{{{도넛 크기|}}}|radial-gradient(white {{{도넛 크기|30}}}%, transparent 0), |}}<!-- | ||
| 148번째 줄: | 148번째 줄: | ||
|크기= | |크기= | ||
|테두리= | |테두리= | ||
|도넛 크기= | |||
|style= | |style= | ||
|1번 색=|1번 수치= | |1번 색=|1번 수치= | ||
| 160번째 줄: | 161번째 줄: | ||
* 정렬 변수는 선택이며, {{u|가운데}}나 {{u|오른쪽}}을 입력하여 위치를 조정할 수 있습니다. 기본값은 왼쪽 정렬입니다. | * 정렬 변수는 선택이며, {{u|가운데}}나 {{u|오른쪽}}을 입력하여 위치를 조정할 수 있습니다. 기본값은 왼쪽 정렬입니다. | ||
* 테두리 변수는 선택이며, <tt>[두께] [모양] [색깔]</tt>로 입력하여 테두리를 추가할 수 있습니다. | * 테두리 변수는 선택이며, <tt>[두께] [모양] [색깔]</tt>로 입력하여 테두리를 추가할 수 있습니다. | ||
* 도넛 크기 변수는 선택이며, 여기에 숫자를 넣은 만큼 그래프의 중앙이 가려져 도넛 모양의 그래프로 만들 수 있습니다. | |||
* style 변수는 그래프 div에 들어갈 값을 추가로 입력할 수 있습니다. | * style 변수는 그래프 div에 들어갈 값을 추가로 입력할 수 있습니다. | ||
| 192번째 줄: | 194번째 줄: | ||
|정렬=가운데 | |정렬=가운데 | ||
|크기=150px | |크기=150px | ||
|1번 색=green|1번 수치=30 | |||
|2번 색=blue|2번 수치=45 | |||
|3번 색=orange|3번 수치=25 | |||
}} | |||
|- | |||
|위 그래프의 도넛 모양 | |||
<pre>{{원형 그래프 | |||
|정렬=가운데 | |||
|크기=150px | |||
|도넛 크기=30 | |||
|1번 색=green|1번 수치=30 | |||
|2번 색=blue|2번 수치=45 | |||
|3번 색=orange|3번 수치=25 | |||
}}</pre> | |||
|{{원형 그래프 | |||
|정렬=가운데 | |||
|크기=150px | |||
|도넛 크기=30 | |||
|1번 색=green|1번 수치=30 | |1번 색=green|1번 수치=30 | ||
|2번 색=blue|2번 수치=45 | |2번 색=blue|2번 수치=45 | ||
2023년 4월 22일 (토) 11:38 판
| 틀:원형 그래프 | |
|---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
설명
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
}}
|
