틀:원 도표

위키백과, 우리 모두의 백과사전.
둘러보기로 가기 검색하러 가기
Template-info.png 틀 설명문서 [편집] [역사] [새로 고침]

사용법[편집]

이름과 값은 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: 각 항목에 해당하는 색. 표준 색상 이름을 사용해야 합니다. 기본 값은 다음과 같습니다.
  1.      red
  2.      green
  3.      blue
  4.      yellow
  5.      fuchsia
  6.      aqua
  7.      brown
  8.      orange
  9.      purple
  10.      teal
  11.      lime
  12.      navy
  13.      olive
  14.      silver
  15.      black

제한[편집]

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

예시[편집]








Circle frame.svg

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
}}






Circle frame.svg

     하나 (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에서는 투명한 경계가 작동하지 않습니다.

같이 보기[편집]