Snow Flower Text によるチャートの記述

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 プロットは2つ軸の連続した数値の二次元プロットです。この分類には次のチャートが属しています。

  • XYグラフ(xy)

  • ヒストグラム(histogram)

  • 散布図(scatter)

パイプロット

円状のプロットです。この分類には円グラフとそのバリアントが属しています。

  • 円グラフ(pie)

  • リング・グラフ(ring)

3. 使い方

AsciiDoc の [chart] ブロックにCSV形式のテキストデータを記述することで 指定のチャートを文書に埋め込む事ができます。

  1. メニュー > 編集 > `文法を選択…​`で、AsciiDoc を選択します。

  2. PlantUML の記述には [chart] ブロックを使用します。メニュー > 挿入 > チャート…​ のメニューからチャートのテンプレートを文書に挿入します。

  3. CSV形式でデータを編集します。編集方法は次の「chart ブロックの記述方法」を参考にしてください。

4. chart ブロックの記述方法

AsciiDoc の文書中に、次のシンタックスを使用することでチャートを文書のその位置に埋め込むことが出来ます。

[chart, チャートの種類, チャートのパラメータのリスト]
--------------------
データの記述
--------------------

4.1. チャートの種類

チャートの種類は chartブロックの第二パラメタで指定します。チャートの種類に対応するパラメタは次の表を参照してください。

Table 1. チャートの種類のパラメタの定義
パラメタ 説明

bar

棒グラフ

stacked-bar

積み上げ棒グラフ

line

折れ線グラフ

area

エリアチャート

stacked-area

積み上げエリアチャート

radar

レーダーチャート

xy

XY プロット

histogram

ヒストグラム

scatter

散布図

pie

パイプロット

ring

リング・グラフ

例えば棒グラフを埋め込みたい場合は 次のように、[chart] ブロックの の第二パラメタに bar を指定します。

[chart, bar]
棒グラフ(bar)

棒グラフは、長方形の棒の長さで何らかの値を表現するグラフ。棒グラフは2つ以上の値を比較するのに使われます。棒の延びる方向は垂直方向の場合と水平方向のものがあります。ヒストグラムでは、棒と棒の間隔を開けませんが、棒グラフでは棒と棒の間隔を開けます。

図 1. [chart,bar, …​]
図 2. [chart, bar, orientation=horizontal, …​]
図 3. [chart, bar,…​]
図 4. [chart, bar, orientation=horizontal, …​]
積み上げ棒グラフ(stacked-bar)

積み上げ棒グラフとは、棒グラフの一種で、同じ項目内の要素を上に積み上げるようにして表現されたグラフです。積み上げ棒グラフでは、項目内の各要素はそれぞれ異なる色で表現され、それぞれの項目の全体量と、項目内の各要素の比率を把握する用途に適しています。たとえば、曜日毎や年度毎の積み上げ棒グラフを表示すると要素の曜日推移や年次推移を把握しやすくなります。

図 5. [chart, stacked-bar,…​]
図 6. [chart, stacked-bar, orientation=horizontal,…​]
折れ線グラフ(line)

折れ線グラフはプロットされた点を直線でつないだものです。一定の期間のデータの変遷を把握する用途に適しています。

図 7. [chart, line,…​]
図 8. [chart, line, orientation=horizontal,…​]
面グラフ(area)

面グラフは折れ線グラフの一種で、定量データを表示したグラフです。 一般的にグラフ内で2つ以上の系列のデータ群を比較し、軸と折れ線に挟まれた領域は色で強調されます。

図 9. [chart, area,…​]
図 10. [chart, area, orientation=horizontal,…​]
積み上げエリアチャート(stacked-area)
図 11. [chart,stacked-area,…​]
レーダーチャート(radar)

レーダーチャートとは、複数の項目を縦軸にとり、縦軸の原点を1つにまとめて放射線状にした図のことです。複数の項目の大きさを一見して比較することが出来ます。クモの巣グラフとも呼ばれています。

図 12. [chart, radar, grid=true,…​]
散布図(scatter)

散布図は、縦軸と横軸に2項目の量や大きさ等を対応させ、データを点でプロットしたものです。散布図には、2項目の分布、相関関係を把握できる特長があります。データ群が右上がりに分布する傾向であれば正の相関があり、右下がりに分布する傾向であれば負の相関があります。散布図は、科学データ、統計データ、工学データなどの数値データの表示や比較によく使用されます。

図 13. [chart, scatter,…​]
XY チャート(xy)
図 14. [chart, xy,…​]
ヒストグラム(histogram)

ヒストグラムは、縦軸に度数、横軸に階級をとった統計グラフの一種です。データの分布状況を視覚的に認識するために主に統計学や数学、画像処理等で用いられています。工業分野では品質管理のためのQC七つ道具として知られています。ヒストグラムでは ビン数をパラメタとして指定します。

図 15. [chart, histogram, bins=10,…​]
円グラフ(pie)

円グラフとは、円をデータ全体(100%)とし、その中に占める要素の構成比を扇形の面積で表したグラフです。円グラフでは、扇形の円弧の長さはその扇形で表される量と比例します。棒グラフなどに比べて個々の領域の大きさを比較するのが難しいことから、円グラフを使用しないことを推奨している統計学者もいます。

円グラフではデータの記述の負の値は無視されます。

図 16. [chart,pie]
リング・グラフ(ring)
図 17. [chart,ring]

4.2. chart ブロックのパラメタ

チャートによって使用できるブロックパラメタは異なります。 チャートと使用できるパラメタの組み合わせは次の表を参照してください。

Table 2. chart ブロックで使用できるパラメタ1
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

Table 3. chart ブロックで使用できるパラメタ2
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

Table 4. chart ブロックで使用できるパラメタ3
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=400
rotate

カテゴリラベルを回転します。度数で指定します。

45度回転する場合
rotate=45
90度回転する場合
rotate=90
図 18. rotate=45
図 19. rotate=90
fontSize

フォントサイズの割合(0~)。 フォントサイズを大きくしたい場合は 1より大きい値を指定します。フォントサイズの指定はすべてのラベルに影響します。

フォントサイズを1.8倍にする場合
fontSize=1.8
図 20. fontSize=1
図 21. fontSize=1.8
orientation

プロットの方向を指定します。 verticalか horizontal が設定できます。 デフォルトは vertical (垂直) です。

垂直方向にプロットする場合
orientaion=vertical
水平方向にプロットする場合
orientaion=horizontal
図 22. orientation=vertical
図 23. orientation=horizontal
caption

チャートのキャプション

xLabel

X軸のラベル

yLabel

Y軸のラベル

categoryLabel

カテゴリラベル

valueLabel

値のラベル

grid

グリッド表示の有無を制御するパラメタです。true か false が指定できます。指定がない場合は false となり、グリッドは非表示になります。

グリッドを非表示にする場合
grid=false
グリッドを表示にする場合
grid=false
図 24. grid=false
図 25. grid=true
bins

ヒストグラム固有のパラメタで、ビン数を指定します。

ビン数を5にする場合
bins=5
ビン数を10にする場合
bins=10
図 26. [chart, histogram, bins=5]
図 27. [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
-------------------------------------
図 28. [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
-------------------------------------
図 29. Area chart
[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

-------------------------------------