틀:원 도표: 두 판 사이의 차이

2023년 7월 3일 (월) 19:52 판

틀:원 도표의 설명문서입니다.

틀 사용 방법에 대한 설명과 틀 분류 등이 들어있습니다.

사용법

이름과 값은 15번째 조각까지 표현할 수 있습니다. 매개변수는 다음과 같이 쓰면 됩니다.

{{원 도표
|섬네일= 
|설명 = 
|기타 = 
|이름1 = 
|값1 = 
|색1 = 
|이름2 = 
|값2 = 
|색2 = 
|이름3 = 
|값3 = 
|색3 = 
|이름4 = 
|값4 = 
|색4 = 
|이름5 = 
|값5 = 
|색5 = 
|이름6 = 
|값6 = 
|색6 = 
}}

나머지 변수 보기

|이름7 = 
|값7 = 
|색7 = 
|이름8 = 
|값8 = 
|색8 = 
|이름9 = 
|값9 = 
|색9 = 
|이름10= 
|값10 = 
|색10 = 
|이름11= 
|값11 = 
|색11 = 
|이름12= 
|값12 = 
|색12 = 
|이름13= 
|값13 = 
|색13 = 
|이름14= 
|값14 = 
|색14 = 
|이름15= 
|값15 = 
|색15 =

섬네일 / thumb: 전체 차트의 위치. 기본 값은 right이며, 왼쪽 정렬은 left라고 지정하세요.
설명 / caption: 범례 이전에 나타나는 설명 문구.
기타 / ohter: 아무 값이나 지정하면 ‘기타’ 항목이 나타납니다.
이름N / labelN: 각 항목에 해당하는 이름. 사용하지 않으면 범례표가 나타나지 않습니다.
값N / valueN: 각 항목에 해당하는 백분율. 백분율 기호(%)는 포함하지 마십시오.
색N / colorN: 각 항목에 해당하는 색. 표준 색상 이름을 사용해야 합니다. 기본 값은 다음과 같습니다.

틀:Columns-list

제한

값은 백분율로 나타내야 됩니다.
IE, 사파리와 오페라에서는 앤티에일리어싱 경계가 제대로 나타나지 않고 약간 들쭉날쭉합니다.
조각 자체에는 이름이 나타나지 않습니다.
원래 원 도표에서는 웹 브라우저의 “그림으로 저장” 기능이 작동하지 않습니다.

예시

2001년 체코의 종교 무신론과 불가지론 (59%) 가톨릭 (26.8%) 프로테스탄트 (2.5%) 기타 (11.7%)

{{원 도표
|섬네일= 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에서는 투명한 경계가 작동하지 않습니다.

같이 보기

위 설명은 틀:원 도표/설명문서의 내용을 가져와 보여주고 있습니다.
이 틀에 대한 수정 연습과 시험은 연습장과 시험장에서 할 수 있습니다.
분류는 /설명문서에 넣어주세요. 이 틀에 딸린 문서.

@@ 1번째 줄: / 1번째 줄: @@
-<includeonly><div class="thumb t{{{섬네일|{{{thumb|right}}}}}}"><div class="thumbinner" style="width:202px">
+<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}}}+2}}px">
 <!-- 그래프 -->
-<div style="background-color:white;margin:auto;position:relative;width:200px;height:200px;overflow:hidden">
+<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)">
+{{#if:{{{값17|{{{value17|}}}}}}|{{원 도표/조각|{{{색17|{{{color17|green}}}}}}|{{#expr:
+{{{값1|{{{value1}}}}}}+{{{값2|{{{value2}}}}}}+{{{값3|{{{value3}}}}}}+{{{값4|{{{value4}}}}}}+{{{값5|{{{value5}}}}}}+{{{값6|{{{value6}}}}}}+{{{값7|{{{value7}}}}}}+{{{값8|{{{value8}}}}}}+{{{값9|{{{value9}}}}}}+{{{값10|{{{value10}}}}}}+{{{값11|{{{value11}}}}}}+{{{값12|{{{value12}}}}}}+{{{값13|{{{value13}}}}}}+{{{값14|{{{value14}}}}}}+{{{값15|{{{value15}}}}}}+{{{값16|{{{value16}}}}}}+{{{값17|{{{value17}}}}}}
+}}}}}}
+{{#if:{{{값16|{{{value16|}}}}}}|{{원 도표/조각|{{{색16|{{{color16|red}}}}}}|{{#expr:
+{{{값1|{{{value1}}}}}}+{{{값2|{{{value2}}}}}}+{{{값3|{{{value3}}}}}}+{{{값4|{{{value4}}}}}}+{{{값5|{{{value5}}}}}}+{{{값6|{{{value6}}}}}}+{{{값7|{{{value7}}}}}}+{{{값8|{{{value8}}}}}}+{{{값9|{{{value9}}}}}}+{{{값10|{{{value10}}}}}}+{{{값11|{{{value11}}}}}}+{{{값12|{{{value12}}}}}}+{{{값13|{{{value13}}}}}}+{{{값14|{{{value14}}}}}}+{{{값15|{{{value15}}}}}}+{{{값16|{{{value16}}}}}}
+}}}}}}
 {{#if:{{{값15|{{{value15|}}}}}}|{{원 도표/조각|{{{색15|{{{color15|black}}}}}}|{{#expr:
 {{{값1|{{{value1}}}}}}+{{{값2|{{{value2}}}}}}+{{{값3|{{{value3}}}}}}+{{{값4|{{{value4}}}}}}+{{{값5|{{{value5}}}}}}+{{{값6|{{{value6}}}}}}+{{{값7|{{{value7}}}}}}+{{{값8|{{{value8}}}}}}+{{{값9|{{{value9}}}}}}+{{{값10|{{{value10}}}}}}+{{{값11|{{{value11}}}}}}+{{{값12|{{{value12}}}}}}+{{{값13|{{{value13}}}}}}+{{{값14|{{{value14}}}}}}+{{{값15|{{{value15}}}}}}
@@ 47번째 줄: / 53번째 줄: @@
 {{{값1|{{{value1}}}}}}
 }}}}
-<div style="position:absolute;left:0;top:0">[[파일:Circle frame.png|200px|link=]]</div>
 </div>
 <!-- 범례 -->
-<div class="thumbcaption">
+<div class="thumbcaption" {{#ifeq:{{{섬네일|{{{thumb|}}}}}}|center|style="text-align:left"}}>
 {{{설명|{{{caption|}}}}}}
 {{#if:{{{이름1|{{{label1|}}}}}}|{{범례|{{{색1|{{{color1|red}}}}}}|{{{이름1|{{{label1|}}}}}} ({{{값1|{{{value1|}}}}}}%)}}
@@ 67번째 줄: / 72번째 줄: @@
 }}{{#if:{{{이름14|{{{label14|}}}}}}|{{범례|{{{색14|{{{color14|silver}}}}}}|{{{이름14|{{{label14|}}}}}} ({{{값14|{{{value14|}}}}}}%)}}
 }}{{#if:{{{이름15|{{{label15|}}}}}}|{{범례|{{{색15|{{{color15|black}}}}}}|{{{이름15|{{{label15|}}}}}} ({{{값15|{{{value15|}}}}}}%)}}
-}}{{#if:{{{기타|{{{other|}}}}}}|{{범례|white|기타 ({{#expr:100-{{{value1|0}}}-{{{value2|0}}}-{{{value3|0}}}-{{{value4|0}}}-{{{value5|0}}}-{{{value6|0}}}-{{{value7|0}}}-{{{value8|0}}}-{{{value9|0}}}-{{{value10|0}}}-{{{value11|0}}}-{{{value12|0}}}-{{{value13|0}}}-{{{value14|0}}}-{{{value15|0}}}-{{{값1|0}}}-{{{값2|0}}}-{{{값3|0}}}-{{{값4|0}}}-{{{값5|0}}}-{{{값6|0}}}-{{{값7|0}}}-{{{값8|0}}}-{{{값9|0}}}-{{{값10|0}}}-{{{값11|0}}}-{{{값12|0}}}-{{{값13|0}}}-{{{값14|0}}}-{{{값15|0}}}}}%)}}}}
+}}{{#if:{{{이름16|{{{label16|}}}}}}|{{범례|{{{색16|{{{color16|red}}}}}}|{{{이름16|{{{label16|}}}}}} ({{{값16|{{{value16|}}}}}}%)}}
+}}{{#if:{{{이름17|{{{label17|}}}}}}|{{범례|{{{색17|{{{color17|green}}}}}}|{{{이름17|{{{label17|}}}}}} ({{{값17|{{{value17|}}}}}}%)}}
+}}{{#if:{{{기타|{{{other|}}}}}}|{{범례|white|기타 ({{#expr:100-{{{value1|0}}}-{{{value2|0}}}-{{{value3|0}}}-{{{value4|0}}}-{{{value5|0}}}-{{{value6|0}}}-{{{value7|0}}}-{{{value8|0}}}-{{{value9|0}}}-{{{value10|0}}}-{{{value11|0}}}-{{{value12|0}}}-{{{value13|0}}}-{{{value14|0}}}-{{{value15|0}}}-{{{value16|0}}}-{{{value17|0}}}-{{{값1|0}}}-{{{값2|0}}}-{{{값3|0}}}-{{{값4|0}}}-{{{값5|0}}}-{{{값6|0}}}-{{{값7|0}}}-{{{값8|0}}}-{{{값9|0}}}-{{{값10|0}}}-{{{값11|0}}}-{{{값12|0}}}-{{{값13|0}}}-{{{값14|0}}}-{{{값15|0}}}-{{{값16|0}}}-{{{값17|0}}}}}%)}}}}
 </div>
 </div></div></includeonly><noinclude>
-{{틀 설명문서}}
+{{설명문서}}
 </noinclude>