Template:DataBar/doc/使用方法
ここでは Template:DataBar の詳細な使用方法を説明します。
このテンプレートがどういうものかについては Template:DataBar/doc をご覧下さい。
はじめに[編集]
このテンプレートは主に表のセルなどに埋め込んで使用します。
テンプレート自体は以下のように記述します:
{{DataBar| 率 | 内容 }}
- 「率」はバーの長さとなるもので、
0〜1の数値で指定します。数式を与えることもできます。詳細は長さを変えるを参照。 - 「内容」はバーの上に表示するテキストなどを指定します。
- 他の引数については引数の一覧で説明します。
実際に見てみましょう。以下に表に埋め込んだ例を示します:
| 品目 | 昨日の売り上げ数 |
|---|---|
| りんご | |
| みかん | |
| ぶどう |
この例は以下のように記述します:
{| class="wikitable"
! 品目
! 昨日の売り上げ数
|-
! りんご
| {{DataBar| 1 | 100個 }}
|-
! みかん
| {{DataBar| .5 | 50個 }}
|-
! ぶどう
| {{DataBar| .17 | 17個 }}
|}
見た目を整えると、以下のようもできます:
| 品目 | 昨日の売り上げ数 |
|---|---|
| りんご | |
| みかん | |
| ぶどう |
引数の一覧[編集]
以下の引数が利用できます。
| 引数 | 指定内容 | 既定値 | 説明 | |
|---|---|---|---|---|
| 1 | rate | 率 | 1
|
→ 長さを変える |
| 2 | content | 内容 | バーの上に表示するテキストです | |
| 3 | color | バーの色 | #cdf
|
→ 色を変える |
| - | line | 線の色 | なし | → 端に線をつける |
| gradient | バーのグラデーション | 単色 | → グラデーションにする | |
| log | 対数グラフ化 | 0 | → 対数グラフにする | |
| ext | 追加のバー | なし | → 積み上げグラフにする | |
| flip | 反転 | しない | → 使用方法: 右を基準にする | |
| title | ツールチップの内容 | % | → 使用方法: ツールチップを指定する | |
長さを変える[編集]
引数 1 (rate) で、バーの長さを指定できます。
これはバーの長さの割合となっていて、 0 (0%) から 1 (100%) までの範囲の数字で指定します。 1 のときはバーが目一杯長くなり .5 では半分の長さになります。
1
|
|
.5
|
|
.17
|
|
.005
|
|
0
|
数式の使用[編集]
引数 1 (rate) には数式を与えることもできます。
主な用途としては 数値/最大値 とすることで直接割合を得ることができます。
数式を記載すればわざわざ割合を計算する手間が省け、特に最大値を変更するときなどは一括置換で済みますので非常に簡便です。
以下に例を示します:
{{DataBar|698/698|698人}}
|
|
{{DataBar|435/698|435人}}
|
|
{{DataBar| 83/698| 83人}}
|
利用可能な演算子などは Help:条件文#expr を参照して下さい。
色を変える[編集]
引数 3 (color) で、バーの色を指定できます。
{{DataBar| 1|color=green}}
|
|
{{DataBar|.7|color=#0000FF}}
|
|
{{DataBar|.3|color=rgb(255,0,0)}}
|
別の引数を利用してグラデーションにすることもできます。
端に線をつける[編集]
引数 line に色を指定すると、バーの端に線が現れます。
バーの端を強調することで、より値をはっきりさせられます。特に短いバーではより視認性が上がります。
記述例: {{DataBar|.7|line=#69f}}
| 値 | 線あり | 線なし |
|---|---|---|
| .7 | ||
| .65 | ||
| .02 | ||
| .01 |
線をつけた場合は、自動的にバーの長さが線の分だけ僅かに短くなります。そのため線の有無に関わらず、バー全体の長さは一定となります。
グラデーションにする[編集]
引数 gradient を用いて、バーの色をグラデーションにすることができます。
Template:gradient を用いると簡単に指定できます。
記述例: {{DataBar|.7|gradient={{gradient|#fff|#9bf}}}}
| 値 | {{gradient|#fff|#9bf}}
|
{{gradient|#fc6|#f60|top}}
|
|---|---|---|
| 1 | ||
| .7 | ||
| .1 |
なおグラデーションは一部のブラウザでは再現されません。具体的にはInternet Explorer 7以前などのブラウザはグラデーションにならず、単一の色で表示されます。
対数グラフにする[編集]
引数 log を用ると、バーの長さを対数にできます。
極端に値の範囲が大きい場合、グラフが非常に見難くなってしまいます。その時は対数グラフにすることでグラフの差を縮めることができます。
引数に 0 を指定すると、グラフは値通り線形を示します。1を指定すると対数となり、2、3とするにつれ図表のようにより強い効果が現れます。
| 値 | log=0
|
log=1
|
log=2
|
log=3
|
|---|---|---|---|---|
| 1 | ||||
| .9 | ||||
| .5 | ||||
| .1 | ||||
| .01 | ||||
| .0001 | ||||
| 0 |
積み上げグラフにする[編集]
引数 ext と Template:DataBar/element を組み合わせることで、積み上げグラフを作ることができます。
データの内訳を示すときに、積み上げグラフを用いるととても便利です。
記述例: {{DataBar|.7|ext={{DataBar/element|.5|#cfd}}{{DataBar/element|.4|#fcd}}}}
| 1 | |
|---|---|
| .7 | |
| .3 |
右を基準にする[編集]
引数 flip を用いて、バーの始点を右にすることができます。
引数には 1 や yes など任意の値を指定します。
記述例: {{DataBar|.7|flip=1}}
| 値 | 通常 | 反転 |
|---|---|---|
| .7 | ||
| .65 | ||
| .02 |
ツールチップを指定する[編集]
引数 title を用いて、ツールチップの内容を変更することができます。
ここでいうツールチップとはHTMLのtitle属性のことで、グラフの数字上にマウスを乗せると表示されるフキダシのことです。既定では計算後の率が百分率で表示されます。
記述例: {{DataBar|.7|title=ツールチップの内容}}
| 品目 | 既定値 | カスタム |
|---|---|---|
| りんご | ||
| みかん | ||
| ぶどう |