편집 요약 없음 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
<includeonly>{{#ifeq:{{{섬네일|{{{thumb|}}}}}}|center|<div class="center">}}<div class="PieChartTemplate thumb t{{#switch:{{{thumb|}}}|center|none=none|left=left|#default=right}}" {{#if:{{{style|}}}|style="{{{style|}}}"}}><div class="thumbinner" style="width:{{#expr:2*{{{radius|100}}}+ | <includeonly>{{#ifeq:{{{섬네일|{{{thumb|}}}}}}|center|<div class="center">}}<div class="PieChartTemplate thumb t{{#switch:{{{thumb|}}}|center|none=none|left=left|#default=right}}" {{#if:{{{style|}}}|style="{{{style|}}}"}}><div class="thumbinner" style="width:{{#expr:2*{{{radius|100}}}+8}}px"> | ||
<!-- 그래프 --> | <!-- 그래프 --> | ||
<div class="mw-no-invert" style="background-color:{{{other-color|white}}};margin:auto;position:relative;width:{{#expr:2*{{{radius|100}}}}}px;height:{{#expr:2*{{{radius|100}}}}}px;overflow:hidden;border-radius:{{{radius|100}}}px;border:1px solid black;transform:scaleX(-1)rotate(-90deg)"> | <div class="mw-no-invert" style="background-color:{{{other-color|white}}};margin:auto;position:relative;width:{{#expr:2*{{{radius|100}}}}}px;height:{{#expr:2*{{{radius|100}}}}}px;overflow:hidden;border-radius:{{{radius|100}}}px;border:1px solid black;transform:scaleX(-1)rotate(-90deg)"> | ||
2023년 7월 3일 (월) 19:55 판
사용법
이름과 값은 15번째 조각까지 표현할 수 있습니다. 매개변수는 다음과 같이 쓰면 됩니다.
{{원 도표
|섬네일=
|설명 =
|기타 =
|이름1 =
|값1 =
|색1 =
|이름2 =
|값2 =
|색2 =
|이름3 =
|값3 =
|색3 =
|이름4 =
|값4 =
|색4 =
|이름5 =
|값5 =
|색5 =
|이름6 =
|값6 =
|색6 =
}}
- 섬네일 / thumb: 전체 차트의 위치. 기본 값은
right이며, 왼쪽 정렬은left라고 지정하세요. - 설명 / caption: 범례 이전에 나타나는 설명 문구.
- 기타 / ohter: 아무 값이나 지정하면 ‘기타’ 항목이 나타납니다.
- 이름N / labelN: 각 항목에 해당하는 이름. 사용하지 않으면 범례표가 나타나지 않습니다.
- 값N / valueN: 각 항목에 해당하는 백분율. 백분율 기호(
%)는 포함하지 마십시오. - 색N / colorN: 각 항목에 해당하는 색. 표준 색상 이름을 사용해야 합니다. 기본 값은 다음과 같습니다.
제한
- 값은 백분율로 나타내야 됩니다.
- IE, 사파리와 오페라에서는 앤티에일리어싱 경계가 제대로 나타나지 않고 약간 들쭉날쭉합니다.
- 조각 자체에는 이름이 나타나지 않습니다.
- 원래 원 도표에서는 웹 브라우저의 “그림으로 저장” 기능이 작동하지 않습니다.
예시
{{원 도표
|섬네일= left
|설명 = 2001년 [[체코]]의 종교
|기타 = 예
|이름1 = [[무신론]]과 [[불가지론]]
|값1 = 59
|색1 = silver
|이름2 = [[가톨릭]]
|값2 = 26.8
|색2 = #008
|이름3 = [[프로테스탄트]]
|값3 = 2.5
|색3 = #08f
}}
하나 (42%) 둘 (32%) 셋 (12%) 넷 (3%) 다섯 (2%) 여섯 (1%)
{{원 도표
|나머지= 예
|값1 = 42
|이름1 = 하나
|값2 = 32
|이름2 = 둘
|값3 = 12
|이름3 = 셋
|값4 = 3
|이름4 = 넷
|값5 = 2
|이름5 = 다섯
|값6 = 1
|이름6 = 여섯
}}
작동 방식
단순한 모양으로 원 도표를 그리고자 실험중인 틀로, parser functions에서 만들어진 (inline) CSS code가 많이 들어갔으며, 자바스크립트는 없습니다. 이곳 CSS에서 대각선 그리기에 있는 기술을 썼으며, miter join의 요소 경계가 들어갔습니다. 그래서, 다른 한쪽 전체가 투명한 곳에 불투명한 경계선을 칠하거나 대각선을 만들 수 있습니다. 선 각도는 한쪽은 불투명한 경계선 폭으로 서로 조절 할 수 있습니다.
인터넷 익스플로러 6에서는 투명한 경계가 작동하지 않습니다.