ヘルプ:棒グラフの書き方のソースを表示

{{HJ:h|Editor toc ja}}

== 登録画像を用いた方法 ==
用意してある画像（[[Portable Network Graphics|png]]ファイル）の組合せで棒グラフを書くことが出来ます。色はg（緑）、r（赤）、b（青）、c（水色）、m（赤紫）、y（黄色）の6色が、長さは01、03、05、10、30、50、100の7種類が用意されています（ウィキペディアでは、<code><nowiki><img></nowiki></code>タグの使用を許していないため、widthなどで画像の大きさを変更することが出来ません）。

ファイル名は、下のように色と長さの組み合わせになっています。
 [[ファイル:g01.png]] <nowiki>[[ファイル:g01.png]]</nowiki>
 [[ファイル:r03.png]] <nowiki>[[ファイル:r03.png]]</nowiki>
 [[ファイル:b05.png]] <nowiki>[[ファイル:b05.png]]</nowiki>
 [[ファイル:c10.png]] <nowiki>[[ファイル:c10.png]]</nowiki>
 [[ファイル:m30.png]] <nowiki>[[ファイル:m30.png]]</nowiki>
 [[ファイル:y50.png]] <nowiki>[[ファイル:y50.png]]</nowiki>
 [[ファイル:g100.png]] <nowiki>[[ファイル:g100.png]]</nowiki>

たとえば緑色で長さ43の棒グラフを表示したいときには、用意された画像を組み合わせて、

<pre>[[ファイル:g30.png]][[ファイル:g10.png]][[ファイル:g03.png]]</pre>

[[ファイル:g30.png]][[ファイル:g10.png]][[ファイル:g03.png]]

のように書くことができます。

また、長さ99以下の棒グラフはもっと簡便な記述をすることも可能です。

書式は<nowiki>{{bar|</nowiki>''a''|''b''|''c''}}です。''a''には色を示す記号を、''b''には長さの10の位の数字を、''c''には長さの1の位の数字を入れます。

 {{bar|g|0|8}} 緑、長さ8 <nowiki> {{bar|g|0|8}} </nowiki>
 {{bar|r|2|0}} 赤、長さ20 <nowiki> {{bar|r|2|0}} </nowiki>
 {{bar|b|4|4}} 青、長さ44 <nowiki> {{bar|b|4|4}} </nowiki>
 {{bar|c|5|9}} 水色、長さ59 <nowiki> {{bar|c|5|9}} </nowiki>
 {{bar|m|7|3}} 赤紫、長さ73 <nowiki> {{bar|m|7|3}} </nowiki>
 {{bar|y|9|6}} 黄色、長さ96 <nowiki> {{bar|y|9|6}} </nowiki>

また、色を組み合わせることによって、内訳を示すこともできます。

例：出費に占める食費の割合（赤が食費）

1月{{bar|r|5|3}}{{bar|g|6|2}}

2月{{bar|r|2|8}}{{bar|g|6|3}}

3月{{bar|r|4|1}}{{bar|g|7|5}}

使用例：[[Wikipedia:日本語版の統計]]

; [http://ja.wikipedia.org/upload/6/69/Graph.zip 表計算使用]:登録画像を用いた作成作業の煩雑さを低減できるかもしれない表計算シート。Excel, OpenOffice.org ともに動作確認済み。クリックするとダウンロードが始まります。

== &lt;table&gt;タグを用いた方法 ==
=== 横棒グラフ ===
{|
|-
|北海道
|style="text-align:right"|86
|<!-- 最上段 --><div style="width:86px;height:16px;background:#9999ff"></div>
|-
|東北
|style="text-align:right"|250
|<!-- 2段目 --><div style="width:250px;height:16px;background:#9999ff"></div>
|-
|関東
|style="text-align:right"|224
|<!-- 3段目 --><div style="width:224px;height:16px;background:#9999ff"></div>
|-
|中部
|style="text-align:right"|250
|<!-- 4段目 --><div style="width:250px;height:16px;background:#9999ff"></div>
|-
|近畿
|style="text-align:right"|260
|<!-- 5段目 --><div style="width:260px;height:16px;background:#9999ff"></div>
|-
|中国
|style="text-align:right"|250
|<!-- 6段目 --><div style="width:250px;height:16px;background:#9999ff"></div>
|-
|四国
|style="text-align:right"|168
|<!-- 7段目 --><div style="width:168px;height:16px;background:#9999ff"></div>
|-
|九州
|style="text-align:right"|178
|<!-- 最下段 --><div style="width:178px;height:16px;background:#9999ff"></div>
|}

=== 累積横棒グラフ ===
<table>
<tr>
<td>0-- 4</td><td>584</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="30" title="300" align="center">男</td><td bgcolor="#ff9999" width="29" title="285" align="center">女</td>
</tr>
</table></td>
</tr>
<tr>
<td>5-- 9</td><td>598</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="31" title="306"><br/></td><td bgcolor="#ff9999" width="30" title="292"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>10--14</td><td>617</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="32" title="316"><br/></td><td bgcolor="#ff9999" width="30" title="301"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>15--19</td><td>707</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="36" title="362"><br/></td><td bgcolor="#ff9999" width="34" title="344"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>20--24</td><td>793</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="41" title="406"><br/></td><td bgcolor="#ff9999" width="39" title="388"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>25--29</td><td>923</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="47" title="469"><br/></td><td bgcolor="#ff9999" width="45" title="454"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>30--34</td><td>964</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="49" title="487"><br/></td><td bgcolor="#ff9999" width="48" title="477"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>35--39</td><td>838</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="42" title="422"><br/></td><td bgcolor="#ff9999" width="42" title="416"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>40--44</td><td>785</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="40" title="395"><br/></td><td bgcolor="#ff9999" width="39" title="390"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>45--49</td><td>799</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="40" title="401"><br/></td><td bgcolor="#ff9999" width="40" title="398"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>50--54</td><td>1019</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="51" title="508"><br/></td><td bgcolor="#ff9999" width="51" title="511"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>55--59</td><td>905</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="45" title="446"><br/></td><td bgcolor="#ff9999" width="46" title="459"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>60--64</td><td>817</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="40" title="396"><br/></td><td bgcolor="#ff9999" width="42" title="421"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>65--69</td><td>744</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="36" title="353"><br/></td><td bgcolor="#ff9999" width="39" title="391"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>70--74</td><td>635</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="29" title="289"><br/></td><td bgcolor="#ff9999" width="35" title="346"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>75--79</td><td>482</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="20" title="202"><br/></td><td bgcolor="#ff9999" width="28" title="280"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>80--84</td><td>298</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="10" title="102"><br/></td><td bgcolor="#ff9999" width="20" title="195"><br/></td>
</tr>
</table></td>
</tr>
<tr>
<td>85歳以上</td><td>260</td><td nowrap="nowrap"><table cellspacing="0" height="16">
<tr>
<td bgcolor="#9999ff" width="7" title="74"><br/></td><td bgcolor="#ff9999" width="19" title="186"><br/></td>
</tr>
</table></td>
</tr>
</table>

=== 横棒グラフ（対抗2値）===
{| class="wikitable" style="border:1px black; float:right; margin-left:1em;"
|-
|<div style="width:380px;height:24px;font:11pt 'Meiryo';text-align:center">日本の影響力について(2012 BBC Poll)</div>
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'"></div>
|<div style="width:20px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#000000"></div>
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">肯定的</div>
|<div style="position:relative;left:150px;width:20px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000"></div>
|<div style="position:relative;left:150px;width:60px;height:11px;font:7pt 'Meiryo'">否定的</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">ナイジェリア</div>
|<div style="width:240px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">80</div>
|<div style="position:relative;left:30px;width:30px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">10</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">インドネシア</div>
|<div style="width:231px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">77</div>
|<div style="position:relative;left:54px;width:15px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">5</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">アメリカ</div>
|<div style="width:222px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">74</div>
|<div style="position:relative;left:24px;width:54px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">18</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">カナダ</div>
|<div style="width:216px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">72</div>
|<div style="position:relative;left:36px;width:48px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">16</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">イギリス</div>
|<div style="width:210px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">70</div>
|<div style="position:relative;left:39px;width:51px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">17</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">ケニア</div>
|<div style="width:204px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">68</div>
|<div style="position:relative;left:51px;width:45px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">15</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">フランス</div>
|<div style="width:198px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">66</div>
|<div style="position:relative;left:30px;width:72px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">24</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:6pt 'Meiryo'">オーストラリア</div>
|<div style="width:195px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">65</div>
|<div style="position:relative;left:36px;width:69px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">23</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">スペイン</div>
|<div style="width:186px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">62</div>
|<div style="position:relative;left:63px;width:51px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">17</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">ブラジル</div>
|<div style="width:180px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">60</div>
|<div style="position:relative;left:54px;width:66px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">22</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">ドイツ</div>
|<div style="width:174px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">58</div>
|<div style="position:relative;left:39px;width:87px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">29</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">チリ</div>
|<div style="width:171px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">57</div>
|<div style="position:relative;left:93px;width:36px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">12</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">ペルー</div>
|<div style="width:171px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">57</div>
|<div style="position:relative;left:87px;width:42px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">14</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">エジプト</div>
|<div style="width:171px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">57</div>
|<div style="position:relative;left:84px;width:45px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">15</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">ロシア</div>
|<div style="width:162px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">54</div>
|<div style="position:relative;left:108px;width:30px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">10</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">ガーナ</div>
|<div style="width:144px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">48</div>
|<div style="position:relative;left:126px;width:30px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">10</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">インド</div>
|<div style="width:132px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">44</div>
|<div style="position:relative;left:135px;width:33px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">11</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">メキシコ</div>
|<div style="width:132px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">44</div>
|<div style="position:relative;left:90px;width:78px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">26</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">日本</div>
|<div style="width:123px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">41</div>
|<div style="position:relative;left:150px;width:27px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">9</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">パキスタン</div>
|<div style="width:123px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">41</div>
|<div style="position:relative;left:126px;width:51px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">17</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">韓国</div>
|<div style="width:114px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">38</div>
|<div style="position:relative;left:12px;width:174px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">58</div>
|}
{|
|-
|<div style="width:60px;height:11px;font:7pt 'Meiryo'">中国</div>
|<div style="width:48px;height:11px;background:#3333ff;text-align:center;font:7pt 'Times New Roman';color:#ffffff">16</div>
|<div style="position:relative;left:63px;width:189px;height:11px;background:#ff7744;text-align:center;font:7pt 'Times New Roman';color:#000000">63</div>
|}
|}

BBC Global Poll
"Views of Japan's influence." 
By country 2012.[http://www.globescan.com/images/images/pressreleases/bbc2012_country_ratings/2012_bbc_country%20rating%20final%20080512.pdf]
{{-}}

=== 縦棒グラフ ===
[http://www.wikipedia.org/wikistats/EN/TablesWikipediaJA.htm ウィキペディアン累計]
{|
|-
| valign="bottom" | <div style="width:16px; height:2px; background-color:#ff8080"></div>
| valign="bottom" | <div style="width:16px; height:2px; background-color:#ffff80"></div>
| valign="bottom" | <div style="width:16px; height:4px; background-color:#80ff80"></div>
| valign="bottom" | <div style="width:16px; height:5px; background-color:#00ff80"></div>
| valign="bottom" | <div style="width:16px; height:7px; background-color:#80ffff"></div>
| valign="bottom" | <div style="width:16px; height:66px; background-color:#0080ff"></div>
| valign="bottom" | <div style="width:16px; height:79px; background-color:#ff80c0"></div>
| valign="bottom" | <div style="width:16px; height:87px; background-color:#ff80ff"></div>
| valign="bottom" | <div style="width:16px; height:97px; background-color:#ff0000"></div>
| valign="bottom" | <div style="width:16px; height:105px; background-color:#ffff00"></div>
| valign="bottom" | <div style="width:16px; height:120px; background-color:#80ff00"></div>
| valign="bottom" | <div style="width:16px; height:140px; background-color:#00ff40"></div>
| valign="bottom" | <div style="width:16px; height:176px; background-color:#00ffff"></div>
| valign="bottom" | <div style="width:16px; height:214px; background-color:#0080c0"></div>
| valign="bottom" | <div style="background-color:#8080c0; height:284px; width:16px"></div>
|- style="text-align:center"
| 2 || 2 || 4 || 5 || 7 || 66 || 79 || 87 || 97 || 105 || 120 || 140 || 176 || 214 || 284
|- style="text-align:center"
| Sep || Oct || Nov || Dec || Jan || Feb || Mar || Apr || May || Jun || Jul || Aug || Sep || Oct || Nov
|}

== #invoke:Chartを用いる方法  ==
<pre>
{{ #invoke:Chart | bar chart
| group 1 = 40 : 50 : 60 : 20
| group 2 = 20 : 60 : 12 : 44
| group 3 = 55 : 14 : 33 : 5
| links 1 = Apple : McCintosh : Golden delicious
| links 2 = Banana : Apricot : Peach
| links 3 = Orange : Pear : Bear
| tooltip 2 = tooltip 1 : tooltip 2 : tooltip 3 : tooltip 4
| colors = green : yellow : orange
| group names = Apple : Banana : Orange
| x legends = Before : During : After : Post mortem
}}
</pre>


{{ #invoke:Chart | bar chart
| group 1 = 40 : 50 : 60 : 20
| group 2 = 20 : 60 : 12 : 44
| group 3 = 55 : 14 : 33 : 5
| links 1 = Apple : McCintosh : Golden delicious
| links 2 = Banana : Apricot : Peach
| links 3 = Orange : Pear : Bear
| tooltip 2 = tooltip 1 : tooltip 2 : tooltip 3 : tooltip 4
| colors = green : yellow : orange
| group names = Apple : Banana : Orange
| x legends = Before : During : After : Post mortem
}}

== その他 ==
* [[Template:Composition bar]] - 割合を図示した棒グラフ用テンプレート
* [[Template:Bar box]] - 横棒グラフ用テンプレート
* [[Template:Bar chart]] - 横棒グラフ用テンプレート
* [[Template:Pie chart]] - 円グラフ用テンプレート

{{DEFAULTSORT:ほうくらふ}}