チャートコンポーネント仕様

チャートコンポーネントの機能仕様を解説します。

1. 概要

チャートコンポーネントは、さまざまな種類のグラフを表現するxfyコンポーネントです。XML文書中の数値や、xfyユーザーエージェントを利用して実現された表計算機能などから、データを視覚的に表現するために使用します。チャートコンポーネントは、表示に必要な基本的な機能だけを提供します。この文書では、チャートコンポーネントの機能仕様を解説します。

グラフを記述するための要素・属性は、「チャート記述リファレンス」をご覧ください。

2. グラフの構成要素

チャートコンポーネントで作成されるグラフの、主な構成要素を説明します。

チャートコンポーネントで作成されるグラフの構成要素
チャートコンポーネントで作成されるグラフの構成要素
タイトル
グラフの見出しです。チャートコンポーネントでは、メインタイトルとサブタイトルを付けられます。
データをグラフ上に配置するときの基準を示す線です。軸は初期状態で表示されます。軸には初期状態で目盛や目盛ラベルが表示されます。また、必要ならば単位ラベルや軸タイトル、省略線を表示できます。
グラフの種類によって、個々の軸の名称は異なります。
プロットエリア
グラフの描画領域です。プロットエリアは必ず表示されます。
系列
グラフで表示される、一連の関連した値の集合です。系列は初期状態で表示されます。
凡例
系列に対応するグラフの色や線種、塗りつぶしパターンなどを示す対応表です。凡例は、株価グラフ以外では初期状態で表示されます。
コメント
グラフに関する注釈文です。
データラベル
グラフ内のデータに名前や値を表示する文字列です。
文字ラベル
グラフ内の任意の位置に表示できる文字列です。

チャート記述ボキャブラリでは、これらの構成要素の表示に関する設定を変更することができます。

3. グラフの種類

チャートコンポーネントでは、以下の13分類に大別されるグラフを表示できます。

それぞれの分類に含まれるグラフの種類を合計すると、全部で108種類になります。

以下、グラフの分類への簡単な説明と、分類に含まれるグラフの種類とその特徴の一覧表を示します。なお、説明中のグラフ種類の名前は、チャートコンポーネントでグラフを作成するときに、 chart:chart要素type属性に設定する名前です。

3.1. 棒グラフ

棒の長さが量や比率を表すグラフです。

棒グラフ
棒グラフ

棒グラフには、次の特徴を組み合わせて作られる18種類のグラフがあります。

  • グラフの向き
    縦向きと横向きがあります。
  • 棒の奥行きや形状
    普通の棒のほか、角柱や円柱を選択できます。
  • 系列の配置
    並べて表示するほか、同じ系列で積み重ねて表示できます。
  • 単位
    数値をそのまま使うほか、パーセント単位で表示できます。

棒グラフの種類とその特徴を、下記の表に示します。

グラフ種類の名前 向き 奥行き 積み立て %単位 円柱
VBar        
WideVBar selected      
WideVCylinder selected     selected
StackedVBar   selected    
WideStackedVBar selected selected    
WideStackedVCylinder selected selected   selected
StackedVBarPercent   selected selected  
WideStackedVBarPercent selected selected selected  
WideStackedVCylinderPercent selected selected selected selected
HBar        
WideHBar selected      
WideHCylinder selected     selected
StackedHBar   selected    
WideStackedHBar selected selected    
WideStackedHCylinder selected selected   selected
StackedHBarPercent   selected selected  
WideStackedHBarPercent selected selected selected  
WideStackedHCylinderPercent selected selected selected selected

3.2. 折れ線グラフ

隣り合ったデータの間を直線で結んだグラフです。

折れ線グラフ
折れ線グラフ

折れ線グラフには、次の特徴を組み合わせて作られる12種類のグラフがあります。

  • グラフの向き
    縦向きと横向きがあります。
  • 奥行き
    通常の線のほか、奥行きを付けた線で表示できます。
  • 線の引き方
    次の3つの方法で表示できます。
    • 項目の目盛り線上にプロットした点を直線で結ぶ方法
    • 目盛り線と目盛り線の中間にプロットした点を直線で結ぶ方法
    • 項目の目盛り線上にプロットした点から、階段状に線を引く方法

折れ線グラフの種類とその特徴を、下記の表に示します。

グラフ種類の名前 向き 奥行き 線の引き方
VLineBoundary   境界
WideVLineBoundary selected 境界
VLineMiddle   中央
WideVLineMiddle selected 中央
VLineStair   階段
WideVLineStair selected 階段
HLineBoundary   境界
WideHLineBoundary selected 境界
HLineMiddle   中央
WideHLineMiddle selected 中央
HLineStair   階段
WideHLineStair selected 階段

3.3. 面グラフ

データを積み重ねて、量を面で表したグラフです。

面グラフ
面グラフ

面グラフには、次の特徴を組み合わせて作られる8種類のグラフがあります。

  • グラフの向き
    縦向きと横向きがあります。
  • 奥行き
    通常の平面のほか、面に奥行きを付けて表示できます。
  • 単位
    数値をそのまま使うほか、パーセント単位で表示できます。

面グラフの種類とその特徴を、下記の表に示します。

グラフ種類の名前 向き 奥行き %単位
VArea    
VAreaPercent   selected
WideVArea selected  
WideVAreaPercent selected selected
HArea    
HAreaPercent   selected
WideHArea selected  
WideHAreaPercent selected selected

3.4. 円グラフ

全体を表す円を分割した扇形の面積で、それぞれの構成要素の量を表すグラフです。複数の系列を表すためには、複数の円グラフを作成したり、同心円のそれぞれの円に系列を割り当てたりします。

円グラフ
円グラフ

円グラフには、次の特徴を組み合わせて作られる8種類のグラフがあります。

  • 円の配置
    単一の円、複数の円、同心円があります。
  • 奥行き
    通常の円のほか、円に奥行きを付けて表現できます。
  • 大きさの比率
    複数の円を使用する場合、数値の比を円の大きさの比率で表現できます。

円グラフの種類とその特徴を、下記の表に示します。

グラフ種類の名前 配置 奥行き サイズ比
SimplePie 単一円    
PluralPie 複数円    
PluralPieProportion 複数円   selected
MultiplePie 同心円    
WideSimplePie 単一円 selected  
WidePluralPie 複数円 selected  
WidePluralPieProportion 複数円 selected selected
WideMultiplePie 同心円 selected  

3.5. ドーナツグラフ

中心に穴が開いた円グラフです。

ドーナツグラフ
ドーナツグラフ

ドーナツグラフには、次の特徴を組み合わせて作られる8種類のグラフがあります。

  • 円の配置
    単一の円、複数の円、同心円があります。
  • 奥行き
    通常の円のほか、円に奥行きを付けて表現できます。
  • 大きさの比率
    複数の円を使用する場合、数値の比を円の大きさの比率で表現できます。

ドーナツグラフの種類とその特徴を、下記の表に示します。

グラフ種類の名前 配置 奥行き サイズ比
SimpleDoughnut 単一円    
PluralDoughnut 複数円    
PluralDoughnutProportion 複数円   selected
MultipleDoughnut 同心円    
WideSimpleDoughnut 単一円 selected  
WidePluralDoughnut 複数円 selected  
WidePluralDoughnutProportion 複数円 selected selected
WideMultipleDoughnut 同心円 selected  

3.6. レーダーチャート

中心から放射状に配置した軸の上にデータを表示し、隣り合った軸上のデータ同士を結んだ多角形で表現されるグラフです。

レーダーチャート
レーダーチャート

レーダーチャートには、次の特徴を組み合わせて作られる6種類のグラフがあります。

  • 枠の形
    円、多角形、枠線なしがあります。
  • 表現の形状
    線と点で表現する方法と、データを結んだ内側を塗りつぶして表現する方法があります。
  • 目盛の間隔
    すべての軸で目盛の間隔を同じにする方法と、軸ごとに目盛の間隔を変える方法があります。

レーダーチャートの種類とその特徴を、下記の表に示します。

グラフ種類の名前 枠の形 形状 目盛の間隔
RadarAxisAlignAngled 多角形 線と点 揃える
RadarAxisAlignCircular 線と点 揃える
RadarAxisNoAlignAngled 多角形 線と点 軸ごと
RadarAxisNoAlignCircular 線と点 軸ごと
RadarAxisNoAlignFrame なし 線と点 軸ごと
RadarAxisAlignAngledFilled 多角形 塗りつぶし 揃える

3.7. 散布図

1つのデータが独立して変動する2つの数値で表されるときに、その値をx軸・y軸の座標として点描したグラフです。系列ごとに点の間を結ぶ線(接続線)を引いたり、点から各軸への垂線(降下線)を引いたりすることもできます。

散布図
散布図

散布図には、次の特徴を組み合わせて作られる18種類のグラフがあります。

  • 補助線
    接続線や降下線を表示できます。
  • 対数軸
    y軸の値を対数にしたり、x軸・y軸とも値を対数にしたりできます。
  • 対散布図
    通常の散布図と対散布図を選択して作成できます。

散布図の種類とその特徴を、下記の表に示します。

グラフ種類の名前 補助線 対数数値軸 対散布図
XYPlot      
XYPlotSeriesBorder 接続線    
XYPlotDropLinesX 降下線(x軸)    
XYPlotDropLinesY 降下線(y軸)    
XYPlotDropLinesXY 降下線(x 軸・y軸)    
XYPlotLogY   y軸  
XYPlotLogXY   x軸・y軸  
XYPlotSeriesBorderLogY 接続線 y軸  
XYPlotSeriesBorderLogXY 接続線 x軸・y軸  
XYPlotPair     selected
XYPlotPairSeriesBorder 接続線   selected
XYPlotPairDropLinesX 降下線(x軸)   selected
XYPlotPairDropLinesY 降下線(y軸)   selected
XYPlotPairDropLinesXY 降下線(x軸・y軸)   selected
XYPlotPairLogY   y軸 selected
XYPlotPairLogXY   x軸・y軸 selected
XYPlotPairSeriesBorderLogY 接続線 y軸 selected
XYPlotPairSeriesBorderLogXY 接続線 x軸・y軸 selected

3.8. 3D散布図

1つのデータが独立して変動する3つの数値で表されるときに、その値をx軸・y軸・z軸の軸の座標として点描したグラフです。点から2つの軸で作成される面への垂線(降下線)を引いたり、点の間を結ぶ線(接続線)を引いたりすることもできます。また、点をxy平面に投影した影(投影図)を表示することもできます。

3D散布図
3D散布図

3D散布図には、補助線の表現形式が異なる5種類のグラフがあります。3D散布図の種類とその特徴を、下記の表に示します。

グラフ種類の名前 補助線
XYZPlot  
XYZPlotSeriesBorder 接続線
XYZPlotDropLinesXY 降下線(xy平面)
XYZPlotProjection 投影図(xy平面)
XYZPlotDropLines 降下線(xy平面・yz平面・xz平面)

3.9. 箱ひげ図

両端のひげの先が最大値と最小値を示し、箱の部分で1/4値と3/4値、中央値などをグラフです。

箱ひげ図
箱ひげ図

箱ひげ図には、縦向きのグラフと横向きのグラフがあります。箱ひげ図の種類を下記の表に示します。

グラフ種類の名前 向き
VBoxplot
HBoxplot

3.10. 度数分布図

データをいくつかの区分に区切り、各区分に入るデータの度数を棒グラフで表すグラフです。

度数分布図
度数分布図

度数分布図には、次の特徴を組み合わせて作られる6種類のグラフがあります。

  • グラフの向き
    縦向きと横向きがあります。
  • 棒の奥行きや形状
    普通の棒のほか、奥行きのある棒や円柱を選択できます。

度数分布図の種類とその特徴を、下記の表に示します。

グラフ種類の名前 向き 奥行き 円柱
VHistogram    
WideVHistogram selected  
WideVHistogramCylinder selected selected
HHistogram    
WideHHistogram selected  
WideHHistogramCylinder selected selected

3.11. 株価グラフ

株価の推移を見るのに適したグラフです。ローソク足チャートが使用されています。

株価グラフ
株価グラフ

株価グラフには、次の特徴を組み合わせて作られる4種類のグラフがあります。

  • 出来高の表示・非表示
  • 移動平均線の表示・非表示

株価グラフの種類とその特徴を、下記の表に示します。

グラフ種類の名前 棒出来高 移動平均線
StockCandleStick    
StockCandleStickVolume selected  
StockCandleStickTrendLine   selected
StockCandleStickVolumeTrendLine selected selected

3.12. 3Dグラフ

x軸、y軸、z軸に項目名、系列名、値を表すグラフです。

3D棒グラフ
3D棒グラフ

3Dグラフには、次の特徴が異なる4種類のグラフがあります。

  • 立体化する元となったグラフの種類
    立体化する元のグラフには、棒グラフや折れ線グラフ、面グラフがあります。棒グラフの場合、角柱と円柱の2種類があります。

3Dグラフの種類とその特徴を、下記の表に示します。

グラフ種類の名前 種類
3DVBar 棒(角柱)
3DVCylinder 棒(円柱)
3DLine 折れ線
3DArea

3.13. 複合グラフ

1つのグラフ上で、2種類のグラフを組み合わせたグラフです。

複合グラフ
棒グラフと折れ線グラフの複合グラフ

複合グラフには、次の特徴を組み合わせて作られる9種類のグラフがあります。

  • 組み合わせるグラフの種類
    棒グラフ・折れ線グラフ・面グラフから2つが組み合わされます。
  • グラフの向き
    縦向きと横向きがあります。
  • 奥行きや形状
    棒グラフや面グラフの場合、奥行きのあるグラフを表示できます。棒グラフの場合は、円柱も選択できます。

複合グラフの種類とその特徴を、下記の表に示します。

グラフ種類の名前 種類の組み合わせ 向き 奥行き 円柱
PyramidVBar 棒・棒(ピラミッド型)    
PyramidHBar 棒・棒(ピラミッド型)    
PyramidHCylinder 棒・棒(ピラミッド型) selected selected
VBarLine 棒・折れ線    
WideVBarLine 棒・折れ線 selected  
StackedVBarLine 積み立て棒・折れ線    
WideStackedVBarLine 積み立て棒・折れ線 selected  
VAreaLine 面・折れ線    
WideVAreaLine 面・折れ線 selected