Snow Flower Text は10種類以上のチャートの作図をサポートしています。AsciiDoc の文書で、メニューからチャートの種類を選択することでテンプレートが挿入され、CSV形式のデータを編集するだけで簡単にチャートを文書中に埋め込むことができます。 チャートはデータの持つ特徴を視覚的に表現することができデータ全体の概要を把握する場合に効果的です。チャートを文書の中に埋め込むことで、誰でも説得力のあるレポートを簡単に作成することが出来ます。
| チャート機能は Snow Flower Text 独自の AsciiDoc の拡張機能です。このHTML 文書自体も Snow Flower Text を使用して作成しています。 |
1. 特徴
Snow Flower Text のチャート機能には以下の特徴があります。
- 検索可能
レンダリングされたチャートのラベルはテキスト検索可能な状態を維持します。この特徴は HTML や PDF、DocBook といった形式にエクスポートした後にも継承されます。ラスター画像を埋め込むより検索可能性(Findability)に優れています。
- 変更追跡可能
チャートの情報は可読性の高いテキストで記述します。したがって、複数のバージョンで変更された箇所は、一般的なテキストの比較で簡単に見つけることが出来ます。これは情報をバイナリで保持するオフィスソフトにはない優れた特徴です。バイナリ形式のファイルと比較してトレーサビリティ(Traceability)が優れています。
- ベクトルイメージ
チャートはベクトル画像なのであらゆる媒体で鮮明で綺麗にレンダリングされます。どれだけ拡大してもジャギーが発生することはありません。ラスター画像を埋め込むより可搬性(Portability)に優れています。
- ユニバーサルカラー
チャートの色分けに使用しているカラーパレットはあらゆる人が見分けやすい色となるようにカラーユニバーサルデザインを使用しています。
2. チャートの分類
Snow Flower Text では、10種類以上のチャートをサポートしていますが、チャートはプロット方法で分類しています。チャートの分類によって指定できるパラメタやデータの記述方法が異なります。
- カテゴリープロット
カテゴリプロットは、一方の軸の連続した数値ともう一方の軸の非数値 (文字列) カテゴリの二次元プロットです。この分類には次のチャートが属しています。
棒グラフ(bar)
積み上げ棒グラフ(stacked-bar)
折れ線グラフ(line)
エリアチャート(area)
積み上げエリアチャート(stacked-area)
レーダーチャート(radar)
- XY プロット
XY プロットは２つ軸の連続した数値の二次元プロットです。この分類には次のチャートが属しています。
XYグラフ(xy)
ヒストグラム(histogram)
散布図(scatter)
- パイプロット
円状のプロットです。この分類には円グラフとそのバリアントが属しています。
円グラフ(pie)
リング・グラフ(ring)
3. 使い方
AsciiDoc の [chart] ブロックにCSV形式のテキストデータを記述することで 指定のチャートを文書に埋め込む事ができます。
メニュー>編集> `文法を選択…`で、AsciiDoc を選択します。チャートの埋め込みには
[chart]ブロックを使用します。メニュー>挿入>チャート…のメニューからチャートのテンプレートを文書に挿入します。CSV形式でデータを記述します。詳しくは次の「chart ブロックの記述方法」を参考にしてください。
4. chart ブロックの記述方法
AsciiDoc の文書中に、次のシンタックスを使用することで、その位置にチャートを文書に埋め込むことが出来ます。
[chart, チャートの種類, チャートのパラメータのリスト]
--------------------
データの記述
--------------------例えば簡単な棒グラフは次のように記述します。
[chart, bar, categoryLabel="category",valueLabel="value"]
-------------------------------------
A, 10
B, 20
C, 30
-------------------------------------これは次のようにレンダリングされます。
4.1. チャートの種類
チャートの種類は chartブロックの第二パラメタで指定します。チャートの種類に対応するパラメタは次の表を参照してください。
| パラメタ | 説明 |
|---|---|
| 棒グラフ |
| 積み上げ棒グラフ |
| 折れ線グラフ |
| エリアチャート |
| 積み上げエリアチャート |
| レーダーチャート |
| XY プロット |
| ヒストグラム |
| 散布図 |
| パイプロット |
| リング・グラフ |
例えば棒グラフを埋め込みたい場合は 次のように、[chart] ブロックの第二パラメタに bar を指定します。
[chart, bar]- 棒グラフ(bar)
棒グラフは、長方形の棒の長さで何らかの値を表現するグラフです。棒グラフは2つ以上の値を比較するのに使われます。棒の延びる方向は垂直方向の場合と水平方向のものがあります。棒グラフでは棒の間隔を空けますが、ヒストグラムでは間隔を空けません。
[chart,bar, …]
[chart, bar, orientation=horizontal, …]
[chart, bar,…]
[chart, bar, orientation=horizontal, …]- 積み上げ棒グラフ(stacked-bar)
積み上げ棒グラフとは、棒グラフの一種で、同じ項目内の要素を上に積み上げるようにして表現されたグラフです。積み上げ棒グラフでは、項目内の各要素はそれぞれ異なる色で表現され、それぞれの項目の全体量と、項目内の各要素の比率を把握する用途に適しています。たとえば、曜日毎や年度毎の積み上げ棒グラフを表示すると要素の曜日推移や年次推移を把握しやすくなります。
[chart, stacked-bar,…]
[chart, stacked-bar, orientation=horizontal,…]- 折れ線グラフ(line)
折れ線グラフはプロットされた点を直線でつないだものです。一定の期間のデータの変遷を把握する用途に適しています。
[chart, line,…]
[chart, line, orientation=horizontal,…]- 面グラフ(area)
面グラフは折れ線グラフの一種で定量データを表示したグラフです。一般的にグラフ内で2つ以上の系列のデータ群を比較し、軸と折れ線に挟まれた領域は色で強調されます。
[chart, area,…]
[chart, area, orientation=horizontal,…]- 積み上げエリアチャート(stacked-area)
[chart,stacked-area,…]- レーダーチャート(radar)
レーダーチャートとは、複数の項目を縦軸にとり、縦軸の原点を1つにまとめて放射線状にした図のことです。複数の項目の大きさを一見して比較することが出来ます。クモの巣グラフとも呼ばれています。
[chart, radar, grid=true,…]- 散布図(scatter)
散布図は、縦軸と横軸に2項目の量や大きさ等を対応させ、データを点でプロットしたものです。散布図には、2項目の分布、相関関係を把握できる特長があります。データ群が右上がりに分布する傾向であれば正の相関があり、右下がりに分布する傾向であれば負の相関があります。散布図は、科学データ、統計データ、工学データなどの数値データの表示や比較によく使用されます。
[chart, scatter,…]- XY チャート(xy)
[chart, xy,…]- ヒストグラム(histogram)
ヒストグラムは、縦軸に度数、横軸に階級をとった統計グラフの一種です。データの分布状況を視覚的に認識するために主に統計学や数学、画像処理等で用いられています。工業分野では品質管理のためのQC七つ道具として知られています。ヒストグラムでは ビン数をパラメタとして指定します。
[chart, histogram, bins=10,…]- 円グラフ(pie)
円グラフとは、円をデータ全体（100%）とし、その中に占める要素の構成比を扇形の面積で表したグラフです。円グラフでは、扇形の円弧の長さはその扇形で表される量と比例します。棒グラフなどに比べて個々の領域の大きさを比較するのが難しいことから、円グラフを使用しないことを推奨している統計学者もいます。
円グラフではデータの記述の負の値は無視されます。
[chart,pie]- リング・グラフ(ring)
[chart,ring]
4.2. chart ブロックのパラメタ
チャートの種類によって使用できるブロックパラメタは異なります。 チャートの種類と使用できるパラメタの組み合わせは次の表を参照してください。
| width | fontSize | rotate | orientation | |
|---|---|---|---|---|
bar | Yes | Yes | Yes | Yes |
stacked-bar | Yes | Yes | Yes | Yes |
line | Yes | Yes | Yes | Yes |
area | Yes | Yes | Yes | Yes |
stacked-area | Yes | Yes | Yes | |
xy | Yes | Yes | Yes | |
scatter | Yes | Yes | Yes | |
histogram | Yes | Yes | Yes | |
pie | Yes | Yes | ||
ring | Yes | Yes | ||
radar | Yes | Yes |
| caption | xLabel | yLabel | categoryLabel | valueLabel | |
|---|---|---|---|---|---|
bar | Yes | Yes | Yes | ||
stacked-bar | Yes | Yes | Yes | ||
line | Yes | Yes | Yes | ||
area | Yes | Yes | Yes | ||
stacked-area | Yes | Yes | Yes | ||
xy | Yes | Yes | Yes | ||
scatter | Yes | Yes | Yes | ||
histogram | Yes | Yes | Yes | ||
pie | Yes | ||||
ring | Yes | ||||
radar | Yes |
| bins | grid | |
|---|---|---|
bar | ||
stacked-bar | ||
line | ||
area | ||
stacked-area | ||
xy | ||
scatter | ||
histogram | Yes | |
pie | ||
ring | ||
radar | Yes |
4.2.1. パラメタ定義
widthチャートの横幅(75%, )
ページの横幅 75% で表示する場合width=75%400ピクセルで表示する場合width=400rotateカテゴリラベルを回転します。度数で指定します。
45度回転する場合rotate=4590度回転する場合rotate=90
rotate=45
rotate=90fontSizeフォントサイズの割合(0～)。 フォントサイズを大きくしたい場合は 1より大きい値を指定します。フォントサイズの指定はすべてのラベルに影響します。
フォントサイズを1.8倍にする場合fontSize=1.8
fontSize=1
fontSize=1.8orientationプロットの方向を指定します。 verticalか horizontal が設定できます。 デフォルトは vertical (垂直) です。
垂直方向にプロットする場合orientaion=vertical水平方向にプロットする場合orientaion=horizontal
orientation=vertical
orientation=horizontalcaptionチャートのキャプション
xLabelX軸のラベル
yLabelY軸のラベル
categoryLabelカテゴリラベル
valueLabel値のラベル
gridグリッド表示の有無を制御するパラメタです。true か false が指定できます。指定がない場合は false となり、グリッドは非表示になります。
グリッドを非表示にする場合grid=falseグリッドを表示にする場合grid=false
grid=false
grid=truebinsヒストグラム固有のパラメタで、ビン数を指定します。
ビン数を5にする場合bins=5ビン数を10にする場合bins=10
[chart, histogram, bins=5][chart, histogram, bins=10]
4.3. データの記述方法
チャートのデータの記述方法はチャートの分類毎に記述形式が異なります。
- カテゴリープロット
カテゴリープロットに分類されるプロットは次のCSV形式でデータを記述します。系列が1つの場合は系列名は省略できます。
(//系列名)?
(カテゴリー名, 数値)+複数の系列を指定する場合は 系列名を指定します。
[chart, bar]
--------------------------------
//系列名A
カテゴリー1,1
カテゴリー2,2
//系列名B
カテゴリー1,1
カテゴリー2,2
--------------------------------
- XYプロット
XYプロットに分類されるプロットは次のCSV形式でデータを記述します。系列が1つの場合は系列名は省略できます。
(//系列名)?
(X数値, Y数値)+複数の系列を指定する場合は 系列名を指定します。
[chart, xy]
--------------------------------
//系列名A
1,1
2,2
//系列名B
1,1.5
2,2.5
--------------------------------
- パイプロット
パイプロットに分類されるプロットは次のCSV形式でデータを記述します。
(カテゴリー名, 数値)+複数の系列を指定する場合は 系列名を指定します。
[chart, pie]
--------------------------------
カテゴリー1,1
カテゴリー2,2
--------------------------------
5. サンプルソース
チャート出力のための完全なサンプルソースをいくつか挙げます。チャートを編集する際に参考にしてください。
5.1. 棒グラフ
[chart,bar, categoryLabel="category",valueLabel="value"]
-------------------------------------
//A
1, 45.6
2, 45.6
3, 45.6
//B
1, 27.8
2, 27.8
3, 27.8
//C
1, 15.2
2, 15.2
3, 15.2
//D
1, 4.2
2, 4.2
3, 4.2
//E
1, 2
2, 2
3, 2
-------------------------------------[chart,bar, orientation=horizontal, categoryLabel="category",valueLabel="value"]
-------------------------------------
1, 10
2, 20
3, 30
4, 60
5, 45
6, 20
-------------------------------------
[chart,bar, orientation=horizontal, categoryLabel="category",valueLabel="value"]
-------------------------------------
//A
1, 45.6
2, 45.6
3, 45.6
//B
1, 27.8
2, 27.8
3, 27.8
//C
1, 15.2
2, 15.2
3, 15.2
//D
1, 4.2
2, 4.2
3, 4.2
//E
1, 2
2, 2
3, 2
-------------------------------------5.2. 積み上げ棒グラフ
.`[chart,stacked-bar,...]`
[chart,stacked-bar,categoryLabel="category",valueLabel="value"]
-------------------------------------
//A
1, 45.6
2, 45.6
3, 45.6
//B
1, 27.8
2, 27.8
3, 27.8
//C
1, 15.2
2, 15.2
3, 15.2
//D
1, 4.2
2, 4.2
3, 4.2
//E
1, 2
2, 2
3, 2
-------------------------------------[chart,stacked-bar,…][chart,stacked-bar,orientation=horizontal, categoryLabel="category",valueLabel="value"]
-------------------------------------
//A
1, 45.6
2, 45.6
3, 45.6
//B
1, 27.8
2, 27.8
3, 27.8
//C
1, 15.2
2, 15.2
3, 15.2
//D
1, 4.2
2, 4.2
3, 4.2
//E
1, 2
2, 2
3, 2
-------------------------------------5.3. 折れ線グラフ
[chart,line,categoryLabel="category",valueLabel="value"]
-------------------------------------
//1x
1, 1
2, 2
3, 3
4, 4
5, 5
6, 6
7, 7
//4x
1, 4
2, 8
3, 12
4, 16
5, 20
6, 24
7, 28
//4^2
1, 1
2, 4
3, 9
4, 16
5, 25
6, 36
7, 49
-------------------------------------
5.4. エリアチャート
[chart,area, title="Area chart",categoryLabel="category",valueLabel="value"]
-------------------------------------
//April
1, 4
3, 10
6, 15
9, 8
12, 5
//May
1, 20
3, 15
6, 13
9, 12
12, 14
-------------------------------------
[chart,area, title="Area chart", orientation=horizontal, categoryLabel="category",valueLabel="value"]
-------------------------------------
//April
1, 4
3, 10
6, 15
9, 8
12, 5
//May
1, 20
3, 15
6, 13
9, 12
12, 14
-------------------------------------
5.5. 積み上げエリアチャート
[chart,stacked-area,categoryLabel="category",valueLabel="value"]
-------------------------------------
//April
1, 4
3, 10
6, 15
9, 8
12, 5
//May
1, 20
3, 15
6, 13
9, 12
12, 14
-------------------------------------
5.6. XY チャート
[chart,xy,xLabel="x",yLabel="y"]
-------------------------------------
// A
0,95.599
100,95.785
200,95.550
300,95.145
400,95.598
500,95.729
600,95.600
700,95.564
800,94.919
900,95.533
1000,95.224
// B
0,95.499
100,95.785
200,95.550
300,95.445
400,95.298
500,95.729
600,95.400
700,95.564
800,95.756
900,95.500
1000,95.30
-------------------------------------5.7. 散布図
[chart,scatter,xLabel="x",yLabel="y"]
-------------------------------------
//April
1, 4
3, 10
6, 15
9, 8
12, 5
//May
1, 20
3, 15
6, 13
9, 12
12, 14
-------------------------------------
5.8. ヒストグラム
[chart, histogram, bins=10,xLabel="x",yLabel="y"]
-------------------------------------
//April
1
1
1
1
2
3
3
3
3
4
5
6
6
7
7.8
8.2
9
10
11
12
12
13
14
15
//May
1
1
2
3
4
5
6
7
7.8
8.2
8
9
9
9
10
10
10
10
11
12
13
14
-------------------------------------5.9. 円グラフ
[chart, pie]
--------------------------------
カテゴリー1,1
カテゴリー2,2
--------------------------------
5.10. リング・グラフ
[chart, ring]
--------------------------------
カテゴリー1,1
カテゴリー2,2
--------------------------------
[chart, ring, caption="Ring Chart"]
--------------------------------
カテゴリー1,1
カテゴリー2,2
--------------------------------
5.11. レイダーチャート
[chart,radar]
-------------------------------------
// X
A, 1
B, 2
C, 3
D, 4
E, 5
// Y
A, 5
B, 4
C, 3
D, 2
E, 1
-------------------------------------
[chart,radar, fontSize="1.6", grid=true]
-------------------------------------
// X
A, 1
B, 2
C, 3
D, 4
E, 5
// Y
A, 5
B, 4
C, 3
D, 2
E, 1
-------------------------------------