このドキュメントでは、Chart API を使ってベン図を作成する方法について説明します。

目次

はじめに

ベン図は円が重なったグラフで、さまざまなグループの共通点を示します。グラフでは 2 つまたは 3 つの円からなるベン図がサポートされています。円の相対的なサイズと円の重複量を指定します。

グラフの種類（cht）

次の構文でベン図を指定します。

構文

cht=v

データ文字列は、以下で説明するように、データ形式に適した区切り文字で区切られた最大 7 つの要素のセットです。

• 最初の 3 つの値では、A、B、C の 3 つの円のサイズを指定します。円が 2 つしかないグラフでは、3 つ目の値に 0 を指定します。
• 4 つ目の値は、A と B の交点のサイズを指定します。
• 5 番目の値は A と C の交点のサイズを指定します。円が 2 つしかないグラフの場合は、ここに値を指定しないでください。
• 6 番目の値は、B と C の交点のサイズを指定します。円が 2 つしかないグラフの場合は、ここに値を指定しないでください。
• 7 番目の値は、A、B、C の共通交点のサイズを指定します。円が 2 つしかないグラフの場合は、ここに値を指定しないでください。

ベン図では、すべての値は絶対値ではなく比例します。 つまり、値が 10、20、30 のグラフは、値が 100、200、300 のグラフと同じように見えます（エンコード タイプで値が 100、20、30 の値を受け入れる場合）。

説明	例
3 つの円のベン図。	cht=v chd=t:100,80,60,30,30,30,10
2 つの円のグラフを指定するには、円 C にゼロを指定し、C を含む重複値を指定しません。	cht=v chd=t:100,100,0,50

系列の色 chco

chco パラメータを使用して、すべての系列、各系列、または一部の系列の色を指定できます。

構文

chco=<color_1>,...,<color_n>

<color>

シリーズの色（RRGGBB の 16 進形式）。シリーズごとに異なる色を指定するには、色の値をカンマで区切って追加します。色の数が系列の数より少ない場合、最後の色が繰り返されますが、ベン図では同じ色を使用するとグラフが読みにくくなることがあります。

説明	例
円ごとに異なる色を使用します。	chco=FF6342,ADDE63,63C6DE
色が円よりも少ない場合、最後に指定された色が繰り返されます。ただし、グラフが読みにくくなります。	chco=00FF00,0000FF

標準の機能

このページの残りの機能は、標準のグラフ機能です。

トップへ戻る

グラフのタイトル chtt、chts [すべてのグラフ]

グラフのタイトルのテキスト、色、フォントサイズを指定できます。

構文

chtt=<chart_title>
chts=<color>,<font_size>,<opt_alignment>

 

chtt - グラフのタイトルを指定します。

<チャートのタイトルchart_title>

グラフに表示するタイトル。このテキストが表示される場所は指定できませんが、フォントサイズと色は任意で指定できます。スペースは + 記号、改行の場合はパイプ文字（|）を使用します。

 

chts（省略可） - chtt パラメータの色とフォントサイズ。

<color>

タイトルの色（RRGGBB の 16 進形式）。デフォルトの色は黒です。

<font_size>

タイトルのフォントサイズ（ポイント単位）。

<opt_alignment>

（省略可）: タイトルの配置。次のいずれかの文字列値（大文字と小文字を区別）を選択します。「l」（左）、「c」（中央）、「r」（右）デフォルトは "c" です。

 

例

説明	例
デフォルトの色とフォントサイズを使用したタイトル付きのグラフ。 プラス記号（+）を付けてスペースを指定します。 パイプ文字（|）を使用すると、強制的に改行されます。 ここでは chts を指定しません。	chtt=Site+visitors+by+month| January+to+July
青色の右揃えで 20 ポイントのタイトルが付いたグラフ。	chtt=Site+visitors chts=FF0000,20,r

トップへ戻る

グラフの凡例のテキストとスタイル chdl、chdlp、chdls [すべてのグラフ]

凡例は、各シリーズの説明を短いテキストで示すグラフのサイド セクションです。凡例の各シリーズに関連付けるテキストを指定し、凡例をグラフ上で表示する場所を指定できます。

凡例の周囲に余白を設定する方法については、chma をご覧ください。

文字列値に関する注意: ラベルの文字列には、URL セーフな文字のみを使用できます。安全のためには、文字セット 0-9a-zA-Z にない文字を含む文字列は URL エンコードする必要があります。URL エンコーダは、Google ビジュアリゼーションのドキュメントにあります。

構文

chdl=<data_series_1_label>|...|<data_series_n_label>
chdlp=<opt_position>|<opt_label_order>
chdls=<color>,<size>

 

chdl - 凡例に表示する各シリーズのテキスト。

<data_series_labeldata_series_label>

凡例のエントリのテキスト。各ラベルは、chd 配列内の対応するシリーズに適用されます。スペースには + 記号を使用します。このパラメータを指定しないと、グラフに凡例は表示されません。ラベル内の改行を指定する方法はありません。通常、凡例は凡例テキストが入るように拡張され、グラフ領域は凡例に合わせて縮小されます。

chdlp - （省略可）凡例の位置と凡例のエントリの順序。<position> と <label_order> のいずれかまたは両方を指定できます。両方を指定する場合は、バー文字で区切ります。凡例で chdl の空の凡例エントリをスキップする場合は、任意の値に「s」を追加できます。例: chdlp=bv、chdlp=r、chdlp=bv|r、chdlp=bvs|r

<opt_position>

（省略可）: グラフ上の凡例の位置を指定します。凡例とグラフ領域または画像の枠線との間に追加のパディングを指定するには、chma パラメータを使用します。 次のいずれかの値を選択します。

• b - グラフの下部にある凡例。凡例のエントリは 1 行に並んでいます。
• bv - グラフの下部に凡例があり、凡例のエントリは縦一列に並んでいます。
• t - グラフの上部にある凡例。凡例のエントリは 1 行に並んでいます。
• tv - グラフの上部にある凡例。凡例のエントリは縦一列に並んでいます。
• r - [デフォルト] 凡例をグラフの右側に表示し、凡例のエントリを縦一列に並べます。
• l - 凡例をグラフの左に並べ、凡例のエントリを縦一列に並べます。

<opt_label_order>

（省略可）: 凡例でラベルが表示される順序。次のいずれかの値を選択します。

• l - [垂直方向の凡例のデフォルト] chdl に指定された順序でラベルを表示します。
• r - chdl に対して指定された逆の順序でラベルを表示します。 これは積み上げ棒グラフで、棒と同じ順序で凡例を表示する場合に便利です。
  
• a - [水平の凡例のデフォルト] 自動並べ替え: おおよそ、10 ピクセル ブロック単位で長さの短いものから順に並べられます。2 つの要素が同じ長さ（10 ピクセルのブロックに分割）の場合、最初に指定された要素が先に表示されます。
• 0,1,2... - カスタムラベルの順序。これは chdl のゼロベースのラベル インデックスをカンマで区切ったリストです。

chdls - 省略可: 凡例のテキストの色とフォントサイズを指定します。

<color>

凡例のテキストの色（RRGGBB の 16 進形式）。

<size>

凡例のテキストのポイントのサイズ。

 

例

説明	例
凡例の 2 つの例。凡例のテキストはデータ系列と同じ順序で指定します。	chdl=NASDAQ|FTSE100|DOW chco=FF0000,00FF00,0000FF chdl=First|Second|Third chco=ff0000,00ff00,0000ff
1 つ目のグラフは水平の凡例エントリ（chdlp=t、デフォルト レイアウトは水平）を示し、2 つ目のグラフは下部の垂直の凡例エントリ（chdlp=bv）を示しています。	chdl=First|Second|Third chco=ff0000,00ff00,0000ff chdlp=t chdl=First|Second|Third chco=ff0000,00ff00,0000ff chdlp=bv
この例は、フォントサイズを変更する方法を示しています。	chdls=0000CC,14

トップへ戻る

グラフのマージン chma [すべてのグラフ]

グラフのマージンのサイズをピクセル単位で指定できます。マージンは、指定したグラフサイズ（chs）から内側に向かって計算されます。マージンサイズを大きくしても、グラフの合計サイズは大きくならず、必要に応じてグラフ領域が縮小します。

マージンは、デフォルトではグラフサイズの計算後に残った分になります。このデフォルト値は、グラフの種類によって異なります。指定するマージンは最小値です。グラフ領域に余白がある場合、そのマージンは残りのサイズと同じになります。凡例とラベルに必要なマージンを小さくすることはできません。次の図は、グラフの基本部分を示しています。

グラフのマージンには、軸のラベルと凡例のエリアが含まれます。凡例領域は、テキストにぴったり収まるように自動的にサイズ変更されます。ただし、chma を使用してより大きな幅を指定した場合、マージンサイズが大きく拡大され、グラフ領域が縮小されます。小さすぎるサイズを指定して凡例を切り抜くことはできませんが、必要以上に広いスペースを占有させることができます。 ヒント: 棒グラフでは、棒のサイズが固定されている場合（デフォルト）は、グラフ領域の幅を小さくすることはできません。chbh を使用して、これより小さい、またはサイズ変更可能なバーのサイズを指定する必要があります。

 

構文

chma=
  <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>

<left_margin>、 <right_margin>、 <top_margin>、 <bottom_margin>

グラフ領域の周囲の最小マージンサイズ（ピクセル単位）。軸ラベルがグラフの境界にぶつからないように、この値を大きくするとパディングが追加されます。

<opt_legend_width>、<opt_legend_height>

（省略可）: 凡例の周囲の余白の幅（ピクセル単位）。これを使用して、凡例がグラフ領域や画像の端にぶつけられないようにします。

 

例

説明	例
この例のグラフでは、各辺の最小マージンは 30 ピクセルです。グラフの凡例の幅が 30 ピクセルを超えるため、右側のマージンはグラフの凡例の幅に設定され、他のマージンとは異なります。 軸ラベルはプロット領域外にあるため、マージン空間内に描画されます。	chma=30,30,30,30
凡例の周囲に余白を追加するには、<opt_legend_width> パラメータと <opt_legend_height> パラメータの値を設定します。 この例の凡例の幅は約 60 ピクセルです。<opt_legend_width> を 80 ピクセルに設定すると、マージンは凡例の 20 ピクセル外側まで拡張されます。	chma=20,20,20,30|80,20

トップへ戻る

背景の塗りつぶし chf [すべてのグラフ]

グラフのデータ領域やグラフの背景全体の塗りつぶしの色とスタイルを指定できます。塗りつぶしタイプには、単色塗りつぶし、ストライプ塗りつぶし、グラデーションがあります。 領域ごとに異なる塗りつぶしを指定できます（グラフ領域全体、データ領域のみなど）。グラフ領域の塗りつぶしは、背景の塗りつぶしを上書きします。すべての塗りつぶしは chf パラメータを使用して指定します。値をパイプ文字（|）で区切ることで、同じグラフ内で異なる塗りつぶしタイプ（単色、ストライプ、グラデーション）を混在させることができます。グラフ領域の塗りつぶしは、グラフの背景の塗りつぶしを上書きします。

単色塗りつぶし chf [すべてのグラフ]

背景やグラフ領域に無地の塗りつぶしを指定することも、グラフ全体に透明度の値を割り当てることもできます。パイプ文字（|）を使用して、複数の塗りつぶしを指定できます（マップ: 背景のみ）。

構文

chf=<fill_type>,s,<color>|...

<fill_typefill_type>

グラフの塗りつぶし部分。次のいずれかの値を指定します。

• bg - 背景の塗りつぶし
• c - グラフ領域の塗りつぶし。マップグラフではサポートされていません。
• a - グラフ全体（背景を含む）を透明にします。 <color> の最初の 6 桁は無視され、最後の 2 桁（透明度の値）のみがグラフ全体とすべての塗りつぶしに適用されます。
• b<index> - 棒の塗りつぶし（棒グラフのみ）。 <index> を単色で塗りつぶすバーの系列インデックスに置き換えます。この効果は、棒グラフで chco を指定する場合と同様です。例については、棒グラフの系列の色をご覧ください。

s

単色または透明の塗りつぶしを指定します。

<color>

塗りつぶしの色（RRGGBB の 16 進形式）。透明性の場合、最初の 6 桁は無視されますが、含める必要があります。

 

例

説明	例
このサンプルでは、グラフの背景を淡いグレー（EFEFEF）で塗りつぶします。	chf=bg,s,EFEFEF
この例では、グラフの背景を薄いグレー（EFEFEF）で塗りつぶし、グラフ領域を黒色（000000）で塗りつぶしています。	chf=c,s,000000| bg,s,EFEFEF
この例では、グラフ全体に 50% の透明度を適用します（16 進数の 80 は 128、すなわち約 50% の透明度です）。表セルの背景がグラフ全体に表示されます。	chf=a,s,00000080

トップへ戻る

グラデーション塗りつぶし chf [Line, Bar, Google-o-meter, Radar, Scatter,Venn]

グラフ領域や背景に 1 つ以上のグラデーション塗りつぶしを適用できます。グラデーション塗りつぶしは、ある色から別の色にフェードする機能です。（円グラフ、Google メーターグラフ: 背景のみ）。

グラデーションの塗りつぶしではそれぞれ角度を指定し、指定した位置に固定された 2 つ以上の色を指定します。アンカー間の移動によって色が変化します。<color_centerpoint> の値が異なる 2 つ以上の色を使用して、一方が他方にフェードインできるようにします。追加の各グラデーションは、<color> と <color_centerpoint> のペアで指定されます。

構文

chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>

<fill_typefill_type>

塗りつぶすグラフ領域。次のいずれかです。

• bg - 背景の塗りつぶし
• c - グラフ領域の塗りつぶし。
• b<index> - 棒グラデーションの塗りつぶし（棒グラフのみ）。 <index> をグラデーションで塗りつぶすバーのシリーズ インデックスに置き換えます。例については、棒グラフの系列の色をご覧ください。

lg

グラデーションの塗りつぶしを指定します。

<angle>

0（水平）から 90（垂直）までのグラデーションの角度を指定する数値。

<color>

塗りつぶしの色（RRGGBB の 16 進形式）。

<color_centerpoint>

色のアンカー ポイントを指定します。別のアンカーに近づくと、このポイントから色がフェードし始めます。値の範囲は 0.0（下端または左端）～ 1.0（上端または右端）で、<angle> で指定された角度で傾斜します。

 

例

説明	例
グラフ領域には、角度 0 度（0）で指定された水平線形グラデーションがあります。 色はピーチ（FFE7C6）、左側（位置は 0.0）、右側（1.0）の中央は青色（76A4FB）です。 グラフの背景はグレー（EFEFEF）で描画されます。	chf=   c,lg,0,   FFE7C6,0,（ピーチ）   76A4FB,1（青）
グラフ領域には、45 度（45）の角度で指定された対角線（左下から右上）の線形グラデーションがあります。 最初に指定した色はピーチ（FFE7C6）です。グラフの左下は純粋なピーチです。 2 番目に指定する色は青（6A4FB）です。グラフの右上は純粋な青色です。オフセットを 0.75 に指定することで、右上隅に向かってフェードアウトする青のピークを指定している点に注目してください。 グラフの背景はグレー（EFEFEF）で描画されます。	chf=   c,lg,45,   FFE7C6,0, （ピーチ）   76A4FB,0.75（青）
グラフ領域には、90 度（90）の角度で指定された垂直（上から下）の線形グラデーションがあります。 最初に指定した色は青（76A4FB）です。グラフの上部は純粋な青色です。 2 番目に指定する色はピーチ（FFE7C6）です。グラフの下部は純粋なピーチです。 グラフの背景はグレー（EFEFEF）で描画されます。	chf=   c,lg,90,   FFE7C6,0, （ピーチ）   76A4FB,0.5（青）

トップへ戻る

 

ストライプ塗りつぶしchf [線、棒、Google メーター、レーダー、散布、ベン]

グラフ領域またはグラフ全体に、ストライプの背景の塗りつぶしを指定できます。 （円グラフ、Google メーターグラフ: 背景のみ）。

構文

chf=
  <fill_type>,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>

<fill_typefill_type>

塗りつぶすグラフ領域。次のいずれかです。

• bg - 背景の塗りつぶし
• c - グラフ領域の塗りつぶし
• b<index> - 棒のストライプの塗りつぶし（棒グラフのみ）。 <index> をストライプで塗りつぶすバーの系列インデックスに置き換えます。例については、棒グラフの系列色をご覧ください。

ls

線形ストライプの塗りつぶしを指定します。

<angle>

すべてのストライプの角度。Y 軸を基準として指定します。縦のストライプには 0、横のストライプには 90 を使用します。

<color>

このストライプの色（RRGGBB の 16 進形式）。追加のストライプごとに <color> と <width> を繰り返します。ストライプが 2 つ以上必要です。ストライプはグラフが塗りつぶされるまで交互に表示されます。

<width>

このストライプの幅（0～1）。1 はグラフの全幅です。ストライプはグラフが塗りつぶされるまで繰り返されます。 追加のストライプごとに <color> と <width> を繰り返します。ストライプが 2 つ以上必要です。ストライプはグラフが塗りつぶされるまで交互に表示されます。

 

例

説明	例
bg,ls,0 - 背景のストライプは、y 軸に対して 0 度の角度（y 軸と平行）のストライプで塗りつぶされます。ストライプはグラフの背景とプロット領域全体に表示されます。 CCCCCC,0.15 - 最初のストライプは濃いグレーで、幅はグラフの 15% です。 FFFFFF,0.1 - 2 つ目のストライプは白で、幅はグラフの 10% です。	chf=   bg,ls,0,   CCCCCC,0.15,   FFFFFF,0.1
c,ls,90 - y 軸から 90 度の角度で横のストライプが表示されるグラフ領域。ストライプはプロット領域全体に表示されますが、グラフの背景は省略されます。 999999,0.25 - 最初のストライプは濃いグレーで、幅はグラフの 25% です。 CCCCCC,0.25 - 1 つ目のストライプと同じですが、より明るいグレーになります。 FFFFFF,0.25 - 最初のストライプと同じですが、白色です。	chf=   c,ls,90,   999999,0.25,   CCCCCC,0.25,   FFFFFF,0.25

トップへ戻る