데이터 막대 차트/막대 편집하기

<includeonly>{| title="{{#if:{{{detailed|}}}|{{uc:- {{{color|Grey}}} -}}|{{#if:{{{title|}}}|{{{title}}}|{{uc:- {{{color|Grey}}} -}}}}}}" cellpadding="0" cellspacing="0" {{#if:{{{width|}}}||{{#if:{{{name|}}}||align="center"}}}} style="border-collapse:collapse;{{#if:{{{width|}}}|float:left;|text-align:center;}}"
| <div {{#if:{{{width|}}}|align="center"|}}>{{#if:{{{width|}}}|<sub>{{{name|}}} {{#if:{{{detailed|}}}|{{#if:{{{title|}}}|({{{title}}})|}}|}}</sub>|<sub>{{{value|}}}</sub>}}</div>
{| {{#if:{{{width|}}}||align="center"}} cellpadding="0" cellspacing="0" 
|
{| cellpadding="0" cellspacing="0" style="<!---
--->{{#ifeq:{{{place|}}}|bottom||{{#ifeq:{{{place|}}}|middle||border-top:1px solid #888;}}}}<!---
--->{{#ifeq:{{{place|}}}|top||{{#ifeq:{{{place|}}}|middle||border-bottom:1px solid #888;}}}}<!---
--->{{#ifeq:{{{place|}}}|right||{{#ifeq:{{{place|}}}|center||border-left:1px solid #888;}}}}<!---
--->{{#ifeq:{{{place|}}}|left||{{#ifeq:{{{place|}}}|center||border-right:1px solid #888;}}}}<!---
--->background:{{{color|#ddd}}};"
|- style="vertical-align:bottom;"
| width="{{{width|{{{size|20}}}}}}px" height="{{#if:{{{width|}}}|{{{size|20}}}|{{{height|{{#if: {{#ifexpr:{{{value|not}}} round 0}} | {{{size|20}}} | {{#expr:{{{value|20}}} round 0}} }}}}}}}px" | 
|}
{{#if:{{{width|}}}|{{#if:{{{value|}}}|
{{!}} style="padding-left:2px;" {{!}} <small>{{{value}}}</small>|}}
|{{#if:{{{name|}}}|{{#ifeq:{{{name|}}}|0||
{{!}} style="padding-left:2px;" {{!}} <small>{{{name}}} {{#if:{{{detailed|}}}|{{#if:{{{title|}}}|({{{title}}})|}}|}}</small>|}}|{{#if:{{{detailed|}}}|{{#if:{{{title|}}}|
{{!}} style="padding-left:2px;" {{!}} <small>({{{title}}})</small>|}}|}}}}}}
|}{{{label|}}}
|}</includeonly><noinclude>[https://en.wikipedia.org/wiki/Template:Data_bars/bar 출처: 영문 위키피디아(CC BY-SA 3.0)]

이 틀은 막대그래프에 쓰일 회색의 1픽셀의 막대를 나타낼 수 있다. 기본적으로 막대의 색은 밝은 회색이며 높이와 너비는 각각 20픽셀이다.
{| cellpadding="0" cellspacing="0"
|- 
| <pre>{{데이터 막대 차트/막대}}</pre>
| style="padding-left:12px;" | {{데이터 막대 차트/막대}}
|}

== 색 ==
매개 변수 '''color'''를 통해 막대의 색을 정할 수 있다.
{| cellpadding="0" cellspacing="0"
|- 
| <pre>{{데이터 막대 차트/막대|color=powderblue}}</pre>
| style="padding-left:12px;padding-right:24px;" | {{데이터 막대 차트/막대|color=powderblue}}
| <pre>{{데이터 막대 차트/막대|color=#B0E0E6}}</pre>
| style="padding-left:12px;" | {{데이터 막대 차트/막대|color=#B0E0E6}}
|}

색상 및 레이블(아래 문단 참조)을 결합하면 색상 모음을 쉽게 생성할 수 있다. 예시:

{| cellpadding="0" cellspacing="0"
|- 
| <pre>
{{데이터 막대 차트/막대|color=red   |name=캘리포니아}}
{{데이터 막대 차트/막대|color=blue  |name=플로리다   }}
{{데이터 막대 차트/막대|color=yellow|name=오리건    }}
{{데이터 막대 차트/막대|color=green |name=미주리  }}
</pre>
| style="padding-left:12px;" |
{{데이터 막대 차트/막대|color=red   |name=캘리포니아}}
{{데이터 막대 차트/막대|color=blue  |name=플로리다   }}
{{데이터 막대 차트/막대|color=yellow|name=오리건    }}
{{데이터 막대 차트/막대|color=green |name=미주리  }}
|}

== 높이 및 너비 ==
매개 변수 '''height'''로 ''세로'' 막대의 높이를 정할 수 있다.
{| cellpadding="0" cellspacing="0"
|- style="vertical-align:bottom;"
| <pre>{{데이터 막대 차트/막대
| color  = green
| height = 60
}}</pre>
| style="padding-left:12px;padding-bottom:12px;" | {{데이터 막대 차트/막대|color=green|height=60}}
|}

매개 변수 '''width'''로 ''가로'' 막대의 너비를 정할 수 있다.
{| cellpadding="0" cellspacing="0"
|- style="vertical-align:top;"
| <pre>{{데이터 막대 차트/막대
| color = yellow
| width = 60
}}</pre>
| style="padding-left:12px;padding-top:12px;" | {{데이터 막대 차트/막대|color=yellow|width=60}}
|}

'''Height'''와 '''width'''는 같이 쓰일 수 없다. 하지만, 만약 세로 막대의 넓이를 다르게 하고 싶거나 가로 막대의 높이를 다르게 하고 싶다면 매개 변수 '''size'''를 쓰면 된다.
{| cellpadding="0" cellspacing="0"
|- style="vertical-align:top;"
| <pre>{{데이터 막대 차트/막대
| color = orange
| height = 80
| size  = 4
}}</pre>
| style="padding-left:12px;padding-top:12px;" | {{데이터 막대 차트/막대|color=orange|height=80|size=4}}
| style="padding-left:32px;" | <pre>{{데이터 막대 차트/막대
| color = red
| width = 80
| size  = 4
}}</pre>
| style="padding-left:12px;padding-top:12px;" | {{데이터 막대 차트/막대|color=red|width=80|size=4}}
|}

== 누적 ==
세로 막대와 가로 막대 모두 누적되며, 아래처럼 연속으로 틀을 쓰면 가능하다.

{|
|
{| cellpadding="0" cellspacing="0"
|- 
| <pre>{{데이터 막대 차트/막대|height=50|color=red}}
{{데이터 막대 차트/막대|height=30|color=green}}
{{데이터 막대 차트/막대|height=40|color=blue}}
</pre>
| style="padding-left:12px;padding-top:12px;" |
{{데이터 막대 차트/막대|height=50|color=red}}
{{데이터 막대 차트/막대|height=30|color=green}}
{{데이터 막대 차트/막대|height=40|color=blue}}
|}
|- 
|
{| cellpadding="0" cellspacing="0"
|- 
| <pre>{{데이터 막대 차트/막대|width=50|color=red}}
{{데이터 막대 차트/막대|width=30|color=green}}
{{데이터 막대 차트/막대|width=40|color=blue}}
</pre>
| style="padding-left:12px;" |
{{데이터 막대 차트/막대|width=50|color=red}}
{{데이터 막대 차트/막대|width=30|color=green}}
{{데이터 막대 차트/막대|width=40|color=blue}}
|}
|}

== 라벨 ==
막대의 라벨은 '''label''' ''또는'' '''value''' ''또는'' '''name''' 3가지 매개 변수로 지정할 수 있다.

==== Label ====
'''Label'''은 막대의 ''아래에'' 나타난다.

{| cellpadding="0" cellspacing="0"
|- 
| <pre>{{데이터 막대 차트/막대
| label = 오렌지
| height = 80
}}</pre>
| style="padding-left:12px;padding-top:12px;" | {{데이터 막대 차트/막대|height=80|label = 오렌지}}
| style="padding-left:20px;" | <pre>{{데이터 막대 차트/막대
| label = 사과
| width = 80
}}</pre>
| style="padding-left:12px;padding-top:12px;" | {{데이터 막대 차트/막대|width=80|label = 사과}}
|}

==== Value ====
'''Value'''는 막대가 나타내는 숫자를 표기할 때 쓰일 수 있다. ''세로'' 막대에서는 막대 ''위''에 나타나며, ''가로'' 막대에서는 막대 ''오른쪽''에 나타난다.

{| cellpadding="0" cellspacing="0" style="margin-bottom:8px;"
|- 
| <pre>{{데이터 막대 차트/막대
| height = 80
| label = 오렌지
| value = 80,000
}}</pre>
| style="padding-left:12px;" | {{데이터 막대 차트/막대|height=80|label = 오렌지|value = 80,000}}
| style="padding-left:20px;" | <pre>{{데이터 막대 차트/막대
| width = 80
| label = 사과
| value = 80,000
}}</pre>
| style="padding-left:12px;padding-top:12px;" | {{데이터 막대 차트/막대|width=80|label = 사과|value = 80,000}}
|}

'''Value'''가 반드시 숫자일 필요는 없다. 하지만, ''세로'' 막대그래프만은 틀의 단순화를 위해 '''value'''가 숫자로 지정되었을 경우 '''height'''를 안 넣어도 된다.

{| cellpadding="0" cellspacing="0"
|- 
| <pre>
{|
|- style="vertical-align:bottom;"
| {{데이터 막대 차트/막대 | value = 80}}
| {{데이터 막대 차트/막대 | value = 23}}
| {{데이터 막대 차트/막대 | value = 42}}
| {{데이터 막대 차트/막대 | value = 13}}
| {{데이터 막대 차트/막대 | value = 66}}
|}
</pre>
| style="padding-left:12px;" | 
{|
|- style="vertical-align:bottom;"
| {{데이터 막대 차트/막대 | value = 80}}
| {{데이터 막대 차트/막대 | value = 23}}
| {{데이터 막대 차트/막대 | value = 42}}
| {{데이터 막대 차트/막대 | value = 13}}
| {{데이터 막대 차트/막대 | value = 66}}
|}
|}

''가로'' 막대그래프에서 비슷한 효과를 내기 위해서는 width(너비)가 반드시 지정되어야 한다.

{|
|
<pre>
{|
|- 
| {{데이터 막대 차트/막대 | value = 80 | width = 80 }}
|- 
| {{데이터 막대 차트/막대 | value = 23 | width = 23 }}
|- 
| {{데이터 막대 차트/막대 | value = 42 | width = 42 }}
|- 
| {{데이터 막대 차트/막대 | value = 13 | width = 13 }}
|- 
| {{데이터 막대 차트/막대 | value = 66 | width = 66 }}
|}
</pre>
| style="padding-left:12px;padding-top:12px;" | 
{|
|- style="vertical-align:bottom;"
| {{데이터 막대 차트/막대 | value = 80 | width = 80 }}
|- 
| {{데이터 막대 차트/막대 | value = 23 | width = 23 }}
|- 
| {{데이터 막대 차트/막대 | value = 42 | width = 42 }}
|- 
| {{데이터 막대 차트/막대 | value = 13 | width = 13 }}
|- 
| {{데이터 막대 차트/막대 | value = 66 | width = 66 }}
|}
|}

==== Name ==== 
'''Name''' 라벨도 막대가 나타내는 숫자를 표기할 때 쓰일 수도 있다.

'''Value'''와의 차이점은 오직 값이 나타나는 위치뿐이다. '''Name'''은 ''세로'' 막대에서는 ''오른쪽'', ''가로'' 막대에서는 ''위''에 나타난다.

{| cellpadding="0" cellspacing="0"
|- style="vertical-align:top;"
| <pre>{{데이터 막대 차트/막대
| height = 80
| name = 80,000
}}</pre>
| style="padding-left:12px;padding-top:12px;" | {{데이터 막대 차트/막대|height=80|name = 80,000}}
| style="padding-left:20px;" | <pre>{{데이터 막대 차트/막대
| width = 80
| name = 80,000
}}</pre>
| style="padding-left:12px;padding-top:12px;" | {{데이터 막대 차트/막대|width=80|name = 80,000}}
|}

{| cellpadding="0" cellspacing="0" 
|- style="vertical-align:top;"
| style="padding-right:12px;" | '''Name''' 라벨은 누적 막대에서 매우 유용하다.

{| cellpadding="0" cellspacing="0" width="100%"
|- style="vertical-align:top;"
| <pre>
'''사과'''
{{데이터 막대 차트/막대
| height = 50
| color  = red
| name   = 플로리다
}}
{{데이터 막대 차트/막대
| height = 80
| color  = green
| name   = 캘리포니아
}}
{{Data bars/bar
| height = 40
| color  = blue
| name   = 오리건
}}
</pre>
| style="padding-left:12px;padding-top:12px;" |
'''사과'''
{{데이터 막대 차트/막대|height=50|color=red|name=플로리다}}
{{데이터 막대 차트/막대|height=80|color=green|name=캘리포니아}}
{{데이터 막대 차트/막대|height=40|color=blue|name=오리건}}
|}
|-
| style="border-left:2px solid #888;border-bottom:2px solid #888;padding-left:32px;padding-bottom:12px;" | 하지만 그냥 누적된 '''색상 모음'''을 쓰는 게 더 낫다.

{| cellpadding="0" cellspacing="0"
|- style="vertical-align:top;"
| <pre>
{|
|- style="vertical-align:top;"
|<!-----------------------
--    누적 막대     --
------------------------->
{{데이터 막대 차트/막대|height=50|color=red   }}
{{데이터 막대 차트/막대|height=80|color=green }}
{{데이터 막대 차트/막대|height=40|color=blue|label='''사과'''}}
|<!----------------------
--      색상 모음      --
------------------------>
{{데이터 막대 차트/막대|color=red   |name=플로리다   }}
{{데이터 막대 차트/막대|color=green |name=캘리포니아}}
{{데이터 막대 차트/막대|color=blue  |name=오리건    }}
|}
</pre>
| style="padding-left:12px;padding-top:12px;" |
{|
|- style="vertical-align:top;"
| <!--- stack of bars ---->
{{데이터 막대 차트/막대|height=50|color=red   }}
{{데이터 막대 차트/막대|height=80|color=green }}
{{데이터 막대 차트/막대|height=40|color=blue|label='''사과'''}}
| <!-- color key --->
{{데이터 막대 차트/막대|color=red   |name=플로리다   }}
{{데이터 막대 차트/막대|color=green |name=캘리포니아}}
{{데이터 막대 차트/막대|color=blue  |name=오리건    }}
|}
|}
<!---------------------------
|-
| colspan="2" style="padding-top:12px;" | 
{| cellpadding="0" cellspacing="0"
|- style="vertical-align:top;"
| <pre>
{{데이터 막대 차트/막대| width = 50| color = red   | name = 플로리다   }}
{{데이터 막대 차트/막대| width = 80| color = green | name = 캘리포니아}}
{{데이터 막대 차트/막대| width = 40| color = blue  | name = 오리건    }}
'''오렌지'''
</pre>
| style="padding-left:12px;padding-top:12px;" |
{{데이터 막대 차트/막대| width = 50| color = red   | name = 플로리다   }}
{{데이터 막대 차트/막대| width = 80| color = green | name = 캘리포니아}}
{{데이터 막대 차트/막대| width = 40| color = blue  | name = 오리건    }}
'''오렌지'''
|}------------------>
|}

== 제목 ==
보통은 막대에 마우스 커서를 갖다 대면 그 막대의 색상이 표시된다. 이는 [[색맹]]인 사람들에게 도움이 된다.

하지만, 기본값을 변경해서 더 유용한 정보를 제공할 수도 있다.
 
{| cellspacing="8"
|-
| <pre>
{{데이터 막대 차트/막대| width = 50| color = red   | name = 플로리다   | title = 50}}
{{데이터 막대 차트/막대| width = 80| color = green | name = 캘리포니아| title = 80}}
{{데이터 막대 차트/막대| width = 40| color = blue  | name = 오리건    | title = 40}}
</pre>
|
{{데이터 막대 차트/막대| width = 50| color = red   | name = 플로리다   | title = 50}}
{{데이터 막대 차트/막대| width = 80| color = green | name = 캘리포니아| title = 80}}
{{데이터 막대 차트/막대| width = 40| color = blue  | name = 오리건    | title = 40}}
|}

특히 막대의 값을 나타내는 데에 유용하다. 예시:
{| cellspacing="8"
|-
| <pre>
{{데이터 막대 차트/막대|color=red   |name=플로리다   | title = 5000}}
{{데이터 막대 차트/막대|color=green |name=캘리포니아| title = 8000}}
{{데이터 막대 차트/막대|color=blue  |name=오리건    | title = 4000}}
</pre>
|
{{데이터 막대 차트/막대|color=red   |name=플로리다   | title = 5000}}
{{데이터 막대 차트/막대|color=green |name=캘리포니아| title = 8000}}
{{데이터 막대 차트/막대|color=blue  |name=오리건    | title = 4000}}
|}

아니면, 매개 변수 '''detailed'''를 통해 제목의 값을 이름 옆에 나타낼 수도 있다.

{| cellspacing="8"
|-
| <pre>
{{데이터 막대 차트/막대|color=red   |name=플로리다   | title = 7000| detailed=true}}
{{데이터 막대 차트/막대|color=green |name=캘리포니아| title = 8000| detailed=true}}
{{데이터 막대 차트/막대|color=blue  |name=오리건    | title = 6000| detailed=true}}
</pre>
| 
{{데이터 막대 차트/막대|color=red   |name=플로리다   | title = 7000| detailed=true}}
{{데이터 막대 차트/막대|color=green |name=캘리포니아| title = 8000| detailed=true}}
{{데이터 막대 차트/막대|color=blue  |name=오리건    | title = 6000| detailed=true}}
|}
</noinclude>