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

目次

はじめに

ベン図は、異なるグループ間で共通の金額を示す円が重なったグラフです。グラフは、2 つまたは 3 つの円を持つベン図に対応しています。円の相対サイズと、円間の重複量を指定します。

グラフの種類（cht）

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

構文

cht=v

データ文字列は、最大 7 つの要素から成り、データ形式に適した区切り文字で区切られています。詳細は次のとおりです。

• 最初の 3 つの値は、3 つの円（A、B、C）のサイズを指定します。円が 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 のグラフと同じように見えます（エンコード タイプがこれらの値を受け入れている場合）。

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

シリーズの色 chco

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

構文

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

<色>

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

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

標準の機能

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

トップへ戻る

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

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

構文

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

 

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

<グラフのタイトル>

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

 

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

<color>

タイトルの色。RRGGBB の 16 進数形式で指定します。デフォルトの色は黒です。

<font_size>

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

<opt_alignment>

（省略可）: タイトルの配置。大文字と小文字を区別する次のいずれかの文字列値を選択します: "l" (左) "c" (中央揃え) "r" (right)デフォルトは &ct;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_label>

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

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

<opt_position>

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

• b - グラフの下部にある凡例と、横方向の凡例のエントリ。
• bv - グラフの下部にある凡例と、縦に並んだ凡例のエントリ。
• t - グラフの一番上の凡例と、横方向の凡例のエントリ。
• tv - グラフの一番上の凡例と、縦方向の列にある凡例エントリ。
• r - [デフォルト] グラフの凡例の縦方向の列にある凡例エントリ。
• l - グラフの左側の凡例と、縦方向の列にある凡例エントリ。

<opt_label_order>

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

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

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

<色>

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_type>

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

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

s

塗りつぶし効果（透明または塗りつぶし）を示します。

<色>

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

 

例

説明	例
この例では、グラフの背景を淡いグレー（EFEFEF）で塗りつぶしています。	chf=bg,s,EFEFEF
この例では、グラフの背景を淡いグレー（EFEFEF）で塗りつぶし、グラフ領域を黒（000000）で塗りつぶしています。	chf=c,s,000000| bg,s,EFEFEF
この例では、グラフ全体に 50% の透明度を適用します（16 進数で 80、つまり約 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_type>

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

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

lg

グラデーション フィルを指定します。

<角度>

勾配の角度（0（水平）～ 90（垂直））を指定する数値。

<色>

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

<color_centerpoint>

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

 

例

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

トップへ戻る

 

ストライプ 塗りつぶしchf [Line, Bar, Google-o-meter, Radar, Scatter, Venn]

グラフ領域のストライプの縞模様、またはグラフ全体を指定できます。 （円グラフ、Google メーターのグラフ: バックグラウンドのみ）。

構文

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

<fill_type>

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

• bg - 背景の塗りつぶし
• c - グラフの塗りつぶしエリア
• b<index> - 棒グラフの塗りつぶし（棒グラフのみ）。 <index> を棒の系列インデックスに置き換えて縞模様を埋めます。例については、棒グラフの系列の色をご覧ください。

ls

リニア ストライプ フィルを指定します。

<角度>

すべてのストライプの y 軸からの角度。縦縞には 0 を、横縞には 90 を使用します。

<色>

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

<幅>

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

 

例

説明	例
bg,ls,0 - 背景ストライプは、Y 軸に対して 0 度の角度（ストライプ）でストライプで埋めます。ストライプは、グラフの背景とプロット領域を塗りつぶします。 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

トップへ戻る