警告: この API は 2012 年に非推奨となり、2019 年 3 月 18 日に無効になりました。代わりに、積極的にメンテナンスされている Google Charts API を使用してください。

棒グラフ

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。
   

このドキュメントでは、Chart API を使用して作成できるさまざまなタイプの棒グラフについて説明します。

目次

概要

縦棒グラフ、横棒グラフ、グループ化データ、積み上げデータ、重複バージョンなど、さまざまな棒グラフを作成できます。

棒グラフは、少数の個別データポイントを並べて比較したり、傾向を把握したりするのに役立ちます。系列にデータポイントが少ない場合の折れ線グラフの代わりとして適しています。

棒グラフで複数の系列を表示するには、次の 3 つの方法があります。

グループ化
積み上げ
重複
グループ化グラフ
積み上げグラフ
グラフの重複
cht=bvg
chd=t:5,5,5|10,10,10|15,15,15
cht=bvs
chd=t:5,5,5|10,10,10|15,15,15

cht=bvo
chd=t:5,5,5|10,10,10|15,15,15

バーの幅と間隔は、chbh パラメータで制御できます。chbh を指定しない場合、一部のバーがトリミングされる場合があります。

デフォルトでは、すべての系列は同じ色で表示されます。系列ごとに異なる色を指定しない場合、グラフ内に複数の系列が区別されにくくなります。詳しくは、シリーズの色をご覧ください。

棒グラフにはデフォルトで 1 つ以上の軸が表示されます。デフォルトの軸を非表示にするには、chxs パラメータを使用し、<shax_or_tick> 値にアンダースコアを指定します。

積み上げグラフでシンプルなテキスト形式を使用する場合、以下に示すようにカスタム スケーリングを追加しない限り、グラフが 100 を超える部分をスタックの高さとして切り抜くことに注意してください。

スケーリングしない場合、中央の 3 本の棒は 100 を超え、単純なテキスト形式のデータグラフで切り抜かれます。 2 つのデータセットがある横棒グラフ: 一方のデータセットは暗い青色、2 番目のデータセットは淡い青色のデータ
cht=bhs
chco=4D89F9,C6D9FD
chd=t:10,50,60,80,40|
  50,60,100,40,20
積み上げ棒グラフ全体を表示するには、別のエンコーディング スキームを使用するか、カスタム スケーリングのテキスト形式を使用する必要があります。最大スケール値は、積み重ねられた棒の高さの合計に対する相対値でなければなりません。この例では、最大 160(最大合計値)になります。 2 つのデータセットがある横棒グラフ: 一方のデータセットは暗い青色、2 番目のデータセットは淡い青色のデータ
cht=bhs
chco=4D89F9,C6D9FD
chd=t:10,50,60,80,40|
  50,60,100,40,20
chds=0,160

グラフの種類(cht

棒グラフにはいくつかの種類があります。次の構文で棒グラフを指定します。

構文

cht=<chart_type>

ここで、<chart_type> は次のいずれかのタイプです。

グラフの種類 説明

bhs

積み上げ棒グラフを含む横棒グラフ

最初の例(濃い青色のすべての棒)には、1 つのデータ系列があります。

2 つ目の例(暗いバーと淡い青のバー)は 2 つのシリーズです。(合計棒グラフの値が 100 を超えるように拡大縮小されています)。

ご覧のように、複数のシリーズが積み重ねられています。別のシリーズ色を指定しない場合、すべての色が同じになります(棒が重なって表示されなくなります)。1 つの系列内の各棒に色を指定することもできます。

2 つのデータセットを含む横棒グラフ(どちらも青色)
cht=bhs
chco=4D89F9


2 つのデータセットがある横棒グラフ: 一方のデータセットは暗い青色、2 番目のデータセットは淡い青色のデータ
cht=bhs
chco=4D89F9,C6D9FD
chd=t:10,50,60,80,40|
  50,60,100,40,20
chds=0,160

bvs

積み上げ棒グラフが表示された縦棒グラフ

この例では 2 つのシリーズがあり、すべての積み重ねられた値が完全に表示されるように、カスタム スケーリングのテキスト形式が使用されています。

chp パラメータを使用して bvs チャートのゼロラインを移動する場合、棒がこの値より小さい場合はゼロラインの下に表示され、その値より大きい場合はゼロラインの上に表示されます。

縦棒グラフcht=bvs
chco=4D89F9,C6D9FD
chd=t:10,50,60,80,40|
  50,60,100,40,20
chds=0,160

bvo 棒グラフが積み重ねられるのではなく、積み重ねられる縦棒グラフ。各棒の高さは、合計値ではなく、個々の値です。棒グラフは高さ順に並べ替えられ、すべての棒が表示されます。

bvo 積み上げグラフ
cht=bvo
chd=t:
  10,50,60,80,40
  50,60,100,40,20
  30,30,75,20,60

bhg

棒グラフが横並びの棒グラフ

上のグラフではデフォルトのグループ間隔の値を使用しています。下のグラフでは chbh パラメータを使用して、デフォルトの棒の幅とグループの間隔を変更して、グループを明確にしています。

2 つのデータセットがある横棒グラフ: 1 つ目のデータセットは暗い青色、2 つ目は淡い青色の色で隣接している
cht=bhg
chco=4D89D9,C6D9FD

2 つのデータセットがある横棒グラフ: 1 つ目のデータセットは暗い青色、2 つ目は淡い青色の色で隣接している
cht=bhg
chco=4D89D9,C6D9FD
chbh=15,4,15

bvg

グループ化された棒グラフが表示された縦棒グラフ

縦棒グラフ
cht=bvg
chco=4D89F9,C6D9FD
chbh=15,4,15

トップへ戻る

シリーズの色 chco

chco パラメータを使用して、個々の棒、個々の系列、または複数の系列の色を指定できます。 系列ごとに異なる色を指定しない場合は、すべての系列が同じ色になります。

構文

chco=<series_1_color>, ..., <series_n_color>

    or

chco=<series_1_bar_1>|<series_1_bar_2>|...|<series_1_bar_n>,<series_2>,...,<series_n>
<color>
シリーズまたは個々の棒に適用する RRGGBB の 16 進数。シリーズ全体に色を適用するには、カンマで区切る必要があります。個々の棒に色を適用するには、パイプで区切る必要があります。この 2 つの形式を組み合わせることもできます。 下の表に例を示します。データポイントまたは系列よりも色の値が少ない場合は、グループ内の最初の色から順にリストが繰り返されます。

 

説明
シリーズごとに 1 つの色。カンマ区切りの色で表されます。

縦棒グラフ

cht=bvs
chco=4D89F9,C6D9FD

値ごとに 1 つの色を使用し、パイプ区切りの色で示されます。

縦棒グラフ

cht=bvs
chco=FFC6A5|FFFF42|DEF3BD|00A5C6|DEBDDE

系列の色と個々の棒の色の組み合わせ。

この例は、2 つの系列が棒グラフで表示されます。最初のシリーズはすべて黒(000000,)で、カンマで区切られています。 2 番目の系列はパイプ区切りで、点ごとに異なる色が割り当てられます(FF0000|00FF00|0000FF)。

1 つのデータポイントが赤、2 つ目が緑、3 つ目が青を示す横棒グラフ

chco=000000,FF0000|00FF00|0000FF
chd=s:FOE,elo

この例では、マルチシリーズ チャートの棒ごとにさまざまな色を設定しています。 1 つのデータポイントが赤、2 つ目が緑、3 つ目が青を示す横棒グラフ
chco=
  FF0000|00FF00|0000FF,FFC6A5|DEF3BD|C6EFF7
単色、ストライプ、またはグラデーションの色でシリーズを塗りつぶす色を指定することもできます。単色塗りつぶしは chco を使用する場合と同じように見えますが、ストライプまたはグラデーションにより固有の効果が生じます。 グラデーションを使った塗りつぶし
chd=
  t:10,40,60,80,30,20
chf=
  b0,lg,0,FFE7C6,0,76A4FB,1

縞模様
chd=t:
  40,40,60,80
  30,50,55,86
chf=
  b0,ls,0,FFE7C6,.3,76A4FB,.1
  b1,ls,0,FF0000,.3,FFBFBF,.1

トップへ戻る

バーラベル

棒グラフは標準の軸ラベルをサポートしていますが、棒グラフの土台に沿ったラベルは棒グラフに沿って分散するのではなく、個々の棒に割り当てられます。(ラベルを均等に分散するには、下記のように chxp パラメータを使用します)。軸ラベルを指定して、棒軸に沿ってカスタムラベルを指定しない場合、棒ラベルは各棒または棒のグループのインデックス番号になります。chxl パラメータを使用して、軸ラベルをカスタマイズできます。

説明
デフォルトの X 軸ラベルを使用した棒グラフ。 カスタムラベルなしの棒グラフ
chxt=x,y
カスタムの X 軸ラベルを使用した棒グラフ。

カスタムラベルなしの棒グラフ
chxt=x,y
chxl=0:|Jan|Feb|Mar|Apr|May

ラベルやバーの本数が異なり、ラベルを(各棒の下ではなく)均等に配置する場合は、chxp パラメータと構文 <axis_index>,0 を使用します。ここで、max_index はラベルを付ける軸のインデックス、0 はラベルを均等に配置することを示します。(これは、単一の 0 が最初のラベルの位置を示し、それ以上の値はラベルが軸を越えて自動的に配置されることを示します)。

  • 一番上のグラフ: 3 つのグラフラベルが 5 個の棒に適用されています。ラベルは最初の 3 本のバーの下に揃えられます。
  • 下のグラフ: 同じ 3 つのラベルが 5 本の棒に適用されていますが、chxp=0,0 を使用すると、ラベルが X 軸全体に等間隔になります(軸インデックス 0)。

カスタムラベルなしの棒グラフ
chd=s:cEj9U
chxt=x,y
chxl=0:|2001|2002|2003


カスタムラベルなしの棒グラフ
chd=s:cEj9U
chxt=x,y
chxl=0:|2001|2002|2003
chxp=0,0

トップへ戻る

バーの幅と間隔 chbh

必要に応じて、バーの幅と、バーとグループの間隔にカスタム値を指定できます。すべての棒に指定できる幅の値のセットは 1 つのみです。chbh を指定しない場合、すべての線の幅は 23 ピクセルになります。つまり、棒とスペースの合計の幅がグラフの幅より広いと、線の端が切り取られる可能性があります。

構文

chbh=
  <bar_width_or_scale>,<space_between_bars>,<space_between_groups>
<bar_width_or_scale>
バーの幅。幅または間隔を絶対値または相対値で指定するには、次のいずれかの値を入力します。デフォルト値は 23 ピクセルの絶対値です。
  • width - 棒の幅(ピクセル単位)。間隔の値の絶対値もピクセル単位で指定します。グラフが十分な幅でない場合、棒が切り取られる可能性があります。
  • a - space_between_barsspace_between_groups は絶対単位で指定します(指定しない場合は、デフォルトの絶対値になります)。すべての棒がグラフに収まるように、棒のサイズが変更されます。
  • r - space_between_barsspace_between_groups は相対単位(指定しない場合はデフォルトの相対値)で指定します。相対単位は、棒の幅を表す浮動小数点値(棒の幅は 1.0)です。たとえば、0.5 は棒の幅の半分、2.0 は棒の幅の 2 倍です。グラフの幅が足りない場合、棒が省略されることがあります。
<space_between_bars>
(省略可): 同じグループ内のバー同士の間隔。絶対サイズの場合、これはピクセル単位の幅です。相対サイズの場合、1.0 が棒の幅である浮動小数点値です。デフォルト値は、絶対値が 4 ピクセル、相対値が 4/23 です。
<space_between_groups>
(省略可): 同じグループ内のバーグループの間隔。絶対サイズの場合、これはピクセル単位の幅です。相対サイズの場合、1.0 が棒の幅である浮動小数点値です。デフォルト値は、絶対値の場合は 8 ピクセル、相対値の場合は 8/23 です。

中間のオプション パラメータは省略できません。指定値で終わる必要があります。たとえば、chbh=10,5,10 は有効ですが、chbh=10,,10 は無効です。chbh=10,5, は無効です。

説明

このグラフでは、a 値を使用して値が自動的にサイズ変更されます。

最初のグラフではグループの間隔を指定していないため、グループは明らかではありません。 2 つ目のグラフでは、グループ間に空白(15 ピクセル)を追加しています。

縦方向のグループ化された青と黒の棒グラフ、棒やスペースのサイズも自動的に調整されます

chbh=a




chbh=a,5,15

このグラフでは、r 値を使用して、バーの幅に対するサイズを指定します。このグラフでは、棒間の間隔は棒の幅の 0.5 倍、グループ間の間隔は 1.5 倍となっています。

縦方向のグループ化された青と黒の棒グラフ、棒は自動的にサイズ設定され、スペースはグラフの幅に対する割合で表されます

chbh=r,0.5,1.5

最初のグラフには各系列の値が 5 個ありますが、グラフが小さすぎてデフォルト値の棒をすべて保持できません。

10 * 23 ピクセル(バーの場合)+
5 * 4 ピクセル(間隔の場合)+
4 * 8 ピクセル(グループ間隔)
282 ピクセル -- 190 ピクセルグラフの幅以上

一部のバーは切り取られています。

2 つ目のグラフでは、グラフ内のすべてのバーに合わせて、棒とスペースの絶対値を指定しています。

縦方向にグループ化された青色の棒グラフと黒い棒グラフ(デフォルトの幅は棒グラフ)。

chbh
省略
chs=190x125
2 系列、5 値/系列


縦方向のグループ化された棒グラフ(青と黒)。棒は自動的にサイズ変更されます

chbh=10,5,10

トップへ戻る

ゼロライン chp

グラフにカスタムのゼロ行を指定するには、chp パラメータを使用するか、データ スケーリングでのテキスト エンコードを使用します。このゼロ行は、次の 2 つの方法で機能します。

  • データ スケーリング - スケーリング パラメータ chds でテキスト形式のデータを使用すると、すべてのゼロ値を表示するため必要なだけゼロ行がプッシュされます。
  • chp パラメータ - chp パラメータを使用して、任意のデータ形式のゼロ行を任意の場所に手動で移動することもできます。これにより、実際にはゼロの線が作られ、データ値と任意のゼロ値の差としてバーが再描画されます(つまり、線がゼロ線から棒値まで描画されます)。これは chds と組み合わせて使用できません。

構文

chp=
  <zero_value_series_1>,
   ...,
  <zero_value_series_n>
<zero_value_series_1>
0.0 ~ 1.0 の浮動小数点値です。0.0 は軸の下側、1.0 は軸の上側を表します。棒グラフと再描画された値の値の差がわかるように、棒が再描画されます。
説明

以下は、同じデータが含まれる棒グラフの 3 つのコピーです。

  • 1 つ目のグラフには、ゼロ折れ線グラフが指定されていません。
  • 2 つ目は、ゼロラインが 0.2 のグラフを示しています。ゼロラインが y 軸の距離だけ 0.2 だけ押し上げられています。値 20 は、新しいゼロ行にあるため、消えています。
  • 3 つ目のグラフでは、ゼロラインを 0.5 として表示しています。これで、20 の値が 40 の値(50 未満)と同様に負の値として再び表示されるようになりました。これは、棒が新しいゼロラインの位置から実際のデータ値まで描画されるため、グラフの 50 未満の値が下向きになり、50 を超える値が上方に描画されるためです。

縦線の棒グラフ(グラフの半分まで半分)
chd=t:20,40,60,80,95
ゼロ行が指定されていません。


縦線の棒グラフ(グラフの半分まで半分)
chd=t:20,40,60,80,95
chp=0.2


縦線の棒グラフ(グラフの半分まで半分)
chd=t:20,40,60,80,95
chp=0.5

この例では、カスタム スケーリング(chds)でテキスト形式のデータを使用してゼロ行を設定しています。chdschp は併用できません。

この例の値は -60 ~ 120 です。スケールはバーの上下に間隔を空けるために、-80 ~ 140 に設定されています。

2 つのデータセットが表示されている横棒グラフ: どちらも赤色で示されている
chd=t:30,-60,50,120,80
chds=-80,140

トップへ戻る

複合グラフ

折れ線グラフに線、マーカー、シェイプのマーカーを追加して、複合グラフを作成できます。詳しくは、複合グラフをご覧ください。

特定のバー上のマーカー(cht=bvg のみ)

デフォルトでは、グループ化された縦棒グラフに chm マーカーを描画すると、マーカーはデータを導出したのと同じシリーズに描画されます。データが非表示の系列の場合、デフォルトの動作では、マーカーが棒グラフの中央に配置されます。

ただし、縦方向にグループ化された棒グラフ(bvg タイプ)では、マーカーのデータ系列とは異なるプレースメント シリーズを指定できます。これを行うには、<data_series_index>:<placement_series_index> 構文を使用して <series_index> パラメータ(3 番目のパラメータ)を指定します。

非表示の プレースメントシリーズを指定すると、マーカーはグループの水平方向に中央揃えで配置されます。

この機能を最大限に活用するには、マーカーのデータに非表示の系列を使用し、可視系列上にマーカーを配置します。

次の例は、デフォルトの動作(データ系列とプレースメント系列が同一)と高度な構文(異なるデータとプレースメント系列を指定)を示しています。

非表示のデータ系列、デフォルトのマーカー配置 非表示のデータ系列、高度なマーカーの配置

chd=t2: // First two series are visible
  10,20,30,40,50  // Red bars
  20,40,60,80,100 // Blue bars
  20,20,20,20,20  // Hidden: black circle data
  30,30,30,30,30  // Hidden: black square data
chm=
  o,000000,2,,10 // Circle markers
  s,000000,3,,10 // Square markers

この例では、基本的なデータと構文を使用して、マーカーのデータと配置を同じシリーズに揃えます。これは非公開のシリーズであるため、デフォルトのプレースメントは各グループの垂直方向に中央揃えで配置されます。

chd=t2: // First two series are visible
  10,20,30,40,50  // Red bars
  20,40,60,80,100 // Blue bars
  20,20,20,20,20  // Hidden: black circle data
  30,30,30,30,30  // Hidden: black square data
chm=
  o,000000,2:0,,10 // Circle markers
  o,000000,3:1,,10 // Square markers

この例では、高度な構文によって、マーカーに異なるデータソースとプレースメント シリーズが指定されています。円は非表示の系列 2 のデータを使用し、系列 0 に配置されます。正方形は非表示の系列 3 のデータを使用し、系列 1 に配置されます。

次のサンプルは、グループ化された棒グラフの個々のバーに複数の異なるマーカータイプを追加する方法を示しています。黒い円はプレースメント シリーズとして非表示のシリーズを指定しているため、グループの中心に配置されている点に注意してください。


chd=t4: // First four series are rendered as bars. Remaining data is hidden.
  5,10,15,20,25,30   // Purple bar
  10,20,30,40,50,60  // Blue bar
  30,40,50,60,70,80  // Olive bar
  5,5,5,5,5,5        // Black bar
  0,15,25,30,45,55   // Hidden data: Purple circle, blue error bar start
  15,30,40,45,55,65  // Hidden data: Blue error bar end
  20,35,45,50,55,65  // Hidden data: Yellow error bar start
  40,45,55,80,75,85  // Hidden data: Yellow error bar end
chm=                 // Markers:
  o,D000D0,4:0,,10   // Purple circle: data series 4, placement series 0 (purple)
  E,00D0D0,4:1,,1:10 // Blue error bars: data series 4, placement series 1 (blue)
  E,D0D000,6:2,,1:10 // Yellow error bars: data series 6, placement series 2 (olive)
  o,000000,3:4,,10   // Black circle: data series 3, placement 4 (hidden placement series, centered in group)

トップへ戻る

標準の機能

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

グラフのタイトル chttchts [すべてのグラフ]

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

構文

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

 

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

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

 

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

<色>
タイトルの色。RRGGBB の 16 進数形式で指定します。デフォルトの色は黒です。
<font_size>
タイトルのフォントサイズ(ポイント数)。
<opt_alignment>
(省略可): タイトルの配置。大文字と小文字を区別する文字列値「l」(左)、「c」(中央)、「r」(右)のいずれかを選択します。デフォルトは「c」です。

 

説明

タイトルとグラフ(デフォルトの色とフォントサイズを使用)。

スペースはプラス記号(+)で指定します。

パイプ文字(|)を使用して改行します。

chts は指定されていません。

タイトル付きの縦棒グラフ
chtt=Site+visitors+by+month|
January+to+July

20 ポイントの右揃えの青いタイトルのグラフ。

青色、20 ピクセル、タイトルの縦棒グラフ
chtt=Site+visitors
chts=FF0000,20,r

トップへ戻る

グラフの凡例のテキストとスタイル chdlchdlpchdls [すべてのグラフ]

凡例は、各時系列の簡単な説明をグラフに示した側面セクションです。この凡例の各シリーズに関連付けられたテキストと、グラフ内の表示位置を指定できます。

凡例の余白を設定する方法については、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=bvchdlp=rchdlp=bv|rchdlp=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 - (省略可)凡例のテキストの色とフォントサイズを指定します。

<color>
RRGGBB の 16 進数形式の凡例のテキストの色です。
<size>
凡例テキストの点のサイズ。

 

説明

凡例の 2 つの例。凡例は、データ系列と同じ順序で指定します。

凡例が一致する赤、青、緑の折れ線グラフ

chdl=NASDAQ|FTSE100|DOW
chco=FF0000,00FF00,0000FF

大きな円で囲まれた 2 つの小さい円のベン図


chdl=First|Second|Third
chco=ff0000,00ff00,0000ff

1 つ目のグラフは凡例の横方向のエントリ(chdlp=t、デフォルトのレイアウトは横方向)を示し、2 つ目のグラフは下部の縦方向の凡例項目(chdlp=bv)を示しています。

大きな円で囲まれた 2 つの小さい円のベン図
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=t


大きな円で囲まれた 2 つの小さい円のベン図
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=bv

この例では、フォントサイズを変更しています。

大きな円で囲まれた 2 つの小さい円のベン図
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>、 <底部マージン>
グラフ領域の余白の最小サイズ(ピクセル単位)。この値を増やして、グラフの境界線に軸ラベルがぶつからないように、パディングを追加します。
<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

トップへ戻る

軸のスタイルとラベル [Line, Bar, Google-o-meter, Radar, Scatter]

グラフに表示する軸を指定し、カスタムのラベルや位置、位置、範囲をカスタムで指定できます。

すべてのグラフに、デフォルトで軸線が表示されるわけではありません。chxt パラメータを使用して、グラフに表示する軸を正確に指定できます。デフォルトの軸線には数値は表示されません。数値を表示するには、chxt パラメータで軸を指定する必要があります。

データ値を反映した軸を軸に表示することも、カスタム軸を指定することもできます。 デフォルトでは、0 ~ 100 の範囲でスケーリングされる数値が表示されます。ただし、chxr を使用してその範囲を変更して任意の範囲を表示することや、chxs を使用して値のスタイルを設定(たとえば、通貨記号や小数点以下の桁を表示)できます。

カスタム値(「月、火、水」など)を使用する場合は、chxl パラメータを使用できます。これらのラベルを軸に沿って特定の場所に配置するには、chxp パラメータを使用します。

最後に、chxs パラメータと chxtc パラメータを使用して、カスタム軸と数値軸ラベルの色、サイズ、配置などのプロパティを指定できます。

文字列値に関する注意事項: ラベル文字列に使用できるのは URL セーフの文字のみです。念のため、文字セット 0-9a-zA-Z に含まれていない文字を含むすべての文字列を URL エンコードする必要があります。URL エンコーダは、Google の可視化に関するドキュメントにあります。

このセクションでは、次のトピックについて説明します。


可視軸 chxt

棒グラフ、折れ線グラフ、レーダーグラフ、散布図では、デフォルトで 1 本または 2 本の軸線が表示されますが、これらの線には値は含まれていません。軸の線上に値を表示する、または表示する軸を変更するには、chxt パラメータを使用する必要があります。 デフォルトでは、chxr の範囲を明示的に指定しない限り、軸の値の範囲は 0 ~ 100 です。折れ線グラフのすべての軸線を非表示にするには、cht パラメータでグラフの種類の値の後に :nda を指定します(例: cht=lc:nda)。

デフォルトでは、上軸と下軸には値を基準に目盛りは表示されませんが、左右の軸には目盛りが表示されます。この動作は、chxs パラメータを使用して変更できます。

構文

chxt=
  <axis_1>
    ,...,
  <axis_n>
<>
グラフに表示する軸です。使用可能な軸は次のとおりです。
  • x - 下 X 軸
  • t - 上部 X 軸 [Google-o-Meter でサポートされていません]
  • y - 左 Y 軸
  • r - 右 Y 軸 [Google-o-Meter でサポートされていません]

同じタイプの複数の軸を指定できます(例: cht=x,x,y)。これにより、グラフの下部に沿って 2 組の x 軸が積み重ねられます。これは、数値を示す軸に沿ってカスタムラベルを追加する場合に便利です(下記の例を参照)。軸は内側から描画されるため、x,x の場合、最初の x は一番内側のコピーを指し、次の x は外側へのコピーを表します。

 

説明

この例では、X 軸、Y 軸、上軸(t)、右軸(r)の折れ線グラフが表示されています。

ラベルが指定されていないため、グラフの軸の範囲はデフォルトで 0 ~ 100 に設定されています。

デフォルトでは、上軸と下軸にラベルごとの目盛りは表示されません。

左右のラベルが 0、20、40、60、80、100 で、上下に 0、25、50、75、100 のラベルが付いた折れ線グラフ
chxt=x,y,r,t

軸ごとに複数のラベルのセットを含めるには、同じ値を複数回指定します。この例では、2 組の x セットと 2 組の y 軸を示しています。ここに示されているように、デフォルトの軸ラベルのみを使用する場合、これは特に有用ではありません。ただし、chxl パラメータを使用すると、各軸のコピーごとにカスタムラベルを指定できます。


chxt=x,x,y,y



chxt=x,x,y,y
chxl=
  1:|Freezing|Hot|
  3:|Low|High

この例は、X 軸、Y 軸、T 軸、R 軸が指定された横棒グラフです。

軸ラベルが省略されているため、Chart API では X 軸と T 軸に 0〜100 の範囲が表示されます。

Y 軸と R 軸の範囲は、棒の数によって決まります。この場合、バーは 5 つあるため、Chart API では 0 ~ 4 の範囲が表示されます。最初のラベルは最初の棒の中央に配置され、2 番目のラベルは 2 番目の棒の中央に配置されます。

左右のラベルが 0、20、40、60、80、100 で、上下に 0、25、50、75、100 のラベルが付いた折れ線グラフ
chxt=x,y,r,t

折れ線グラフでデフォルトの軸を非表示にするには、グラフの種類の後に :nda を指定します。 軸を隠した折れ線グラフ
cht=lc:nda

トップへ戻る

軸の範囲 chxr

chxr パラメータを使用して、各軸に表示される値の範囲を指定できます。この操作で変更されるのはグラフ要素のスケールではなく、軸ラベルのスケールのみです。軸の値を実際のデータ値で表す場合は、<start_val> と <end_val> をそれぞれデータ形式の範囲の下限値と上限値に設定します。詳細については、軸のスケーリングをご覧ください。

軸を指定するには、chxt パラメータを使用して軸を表示する必要があります。

カスタム軸の値を指定するには、chxl パラメータを使用します。

構文

複数の軸ラベルの範囲を区切るには、パイプ文字(|)を使用します。

chxr=
  <axis_index>,<start_val>,<end_val>,<opt_step>
    |...|
  <axis_index>,<start_val>,<end_val>,<opt_step>
<軸インデックス>
ラベルを適用する軸。これは、chxt で指定された軸配列に対するゼロベースのインデックスです。たとえば、chxt=x,r,y の r 軸は 1 になります。
<start_val>
この軸の最小値を定義する数値。
<end_val>
この軸の高い値を定義する数値。
<opt_step>
(省略可): 軸上のティック間のカウント手順。ステップの値にはデフォルト値がありません。ステップは、適切に間隔を置いた一連のラベルを表示しようと計算されます。

 

説明

この例では、左右の Y 軸(yr)、1 つの X 軸(x)が表示されています。

各軸には範囲が定義されています。ラベルや位置が指定されていないため、値は指定された範囲から取得され、その範囲内で等間隔になります。折れ線グラフでは、値が X 軸に沿って均等に分布しています。

最初の値(1000)は最後の値(0)よりも大きいため、r 軸の軸方向(インデックス 2)が逆になります。


chxt=x,y,r
chxr=
  0,0,500|
  1,0,200|
  2,1000,0

この例では、x 軸の値が指定されています。

軸ラベルは軸に沿って等間隔に配置されます。<opt_step> パラメータには 5 の値(5)が指定されます。

200、300、400 の軸が棒グラフで表示されます chxt=x
chxr=0,10,50,5

トップへ戻る

カスタム軸ラベルchxl

chxl パラメータを使用して、任意の軸にカスタムの文字列軸ラベルを指定できます。ラベルは必要な数だけ指定できます。軸を表示し(chxt パラメータを使用して)カスタムラベルを指定しない場合、標準の数値ラベルが適用されます。カスタムの数値範囲を指定するには、代わりに chxr パラメータを使用します。

ラベルの軸に沿って特定の場所を設定するには、chxp パラメータを使用します。

構文

ラベルを付ける軸ごとに、1 つのパラメータ セットを指定します。複数のラベルセットはパイプ文字(|)を使用して区切ります。

chxl=
  <axis_index>:|<label_1>|...|<label_n>
    |...|
  <axis_index>:|<label_1>|...|<label_n>
<軸インデックス>
ラベルを適用する軸。これは chxt パラメータ配列のインデックスです。たとえば chxt=x,x,y,y の場合、インデックス 0 が最初の X 軸になり、1 は 2 番目の X 軸になります。
<label_1>| ... |<ラベル ID>
この軸に沿って配置する 1 つ以上のラベル。文字列または数値を指定できます。文字列は引用符で囲む必要はありません。label_1 は軸の最下位に、label_n は一番上に表示されます。追加のラベルは等間隔で区切ります。 スペースは + 記号で示します。ラベルに改行を指定する方法はありません。ラベルはパイプ文字で区切ります。注: chxl パラメータの最後のラベルの後にパイプを入れないでください。

 

説明

このグラフでは、2 つの軸にカスタムラベルを追加する方法を説明します。値の間隔は均等にし、最後の chxl 値はパイプで終わらないことに注意してください。

左側に 0、100、右側に A、B、C、X 軸に 1 月、7 月、1 月、7 月、1 月、下の 2005 年、2006 年、2007 年を表す折れ線グラフ
chxt=x,y
chxl=
0:|Jan|Feb|March|April|May|
1:|Min|Mid|Max

この例では、左右の Y 軸に軸ラベル(yr)が含まれています。また、X 軸には 2 組の値(x)も含まれています。chxs を使用して Y 軸に目盛りを追加することもできます。

左側に 0、100、右側に A、B、C、X 軸に 1 月、7 月、1 月、7 月、1 月、下の 2005 年、2006 年、2007 年を表す折れ線グラフ
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|50|100|
2:|A|B|C|
3:|2005|2006|2007

この例では、左右の Y 軸(yr)に軸ラベルがあります。また、X 軸(x)には 2 つの値セットが含まれています。下位 X 軸のセットには、値同士の間隔を示す空のラベルがあります。

この例では、左側の Y 軸の軸ラベルにデフォルト値を使用しています。

棒グラフは左側が 0、100、右側が A、B、C、X 軸が 1 月、7 月、1 月、7 月、1 月、下が 2005 年、2006 年、2007 年の棒グラフ
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
2:|A|B|C|
3:|2005||2006||2007

軸全体を記述する汎用ラベルを追加する場合(たとえば、ある軸に「費用」と別の「学生」のラベルを付ける場合)、chxt プロパティを使用して、各辺に軸を 1 つずつ追加してから、chxl を使用して各辺に 1 つのカスタムラベルを追加し、chxp を使用して軸の中央にスペースを挿入します。


chxt=x,x,y,y
chxl=1:|Martinis|3:|Score
chxp=1,50|3,50

トップへ戻る

軸ラベルの位置 chxp

デフォルトの軸を使用するか、chxl で指定されたカスタムラベルを使用するかにかかわらず、表示する軸ラベルを指定できます。このパラメータを使用して正確な位置を指定しないと、ラベルは等間隔に、軸に沿ってデフォルトのステップ値で配置されます。chxl を指定しない場合、目盛りラベルはデフォルト値(通常はデータ値、または棒グラフの棒グラフ)になります。

構文

複数の位置セットは、パイプ文字(|)を使用して区切ります。

chxp=
  <axis_1_index>,<label_1_position>,...,<label_n_position>
    |...|
  <axis_m_index>,<label_1_position>,...,<label_n_position>
<軸インデックス>
位置を指定する軸。これは chxt パラメータ配列のインデックスです。たとえば chxt=x,x,y,y の場合、インデックス 0 が最初の X 軸、1 が 2 番目の X 軸というように続きます。
<label_1_position>,...,<label_n_position>
軸に沿ったラベルの位置。これは、数値のカンマ区切りリストです。各値は、chxl 配列内の対応するラベルの位置を設定します。最初のエントリは最初のラベルに適用されます。位置は、その軸の範囲内の値です。chxr を使用してカスタム範囲を指定しない限り、これは常に 0 ~ 100 になります。その位置のラベルは、その軸のラベルと同じ数だけ表示する必要があります。

 

説明

この例では、グラフの指定した位置に r 軸のラベルが含まれています。ラベルのテキストは、chxl パラメータを使用して指定します。

指定した位置が 0 のラベルは、y 軸または r 軸の下部、または x 軸または t 軸の左側に配置されます。

指定した位置が 100 のラベルは、y 軸または r 軸の一番上、または x 軸または t 軸の右側に配置されます。

Line chart with min, average, and max on the right, 20, 40, 60, 80, and 100 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y,r
chxl=2:|min|average|max
chxp=2,10,35,75

この例では、デフォルトのラベルの値が表示されていますが、指定した場所のみが示されています。

chxp=1,10,35,75 - Y 軸には、10、35、75 の 3 つのラベルのみが表示されます。カスタムラベル テキストが指定されていないため、これらの軸の値が表示されます。chxp を使用する際は、ラベルを等間隔にする必要はありません。chxp がここで指定されていない場合、2 つ目のグラフに示すように、Y 軸のデフォルトのラベル値の距離は 20 単位ごとになります。

Line chart with 10, 35, and 75 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y
chxp=1,10,35,75

デフォルトの軸の位置を含む折れ線グラフ
chxt=x,y
chxp 指定なし

トップへ戻る

軸ラベルのスタイルchxs

カスタムラベルとデフォルトのラベル値の両方で、軸ラベルのフォントサイズ、色、配置を指定できます。同じ軸上のすべてのラベルは同じ形式です。軸の複数のコピーがある場合は、それぞれ別の形式にすることができます。ラベル文字列の形式を指定することもできます。たとえば、通貨記号や末尾のゼロを表示できます。

デフォルトでは、上軸と下軸には値を基準に目盛りは表示されませんが、左右の軸には目盛りが表示されます。

構文

複数の軸の値は、パイプ文字(|)を使用して区切る必要があります。

chxs=
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
   |...|
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
<軸軸>
適用軸です。これは、chxt パラメータに対するゼロベースのインデックスです。
<opt_format_string>
(省略可): 省略した場合は、形式を示す文字列です。使用する場合、軸インデックス番号の直後にカンマを挿入します。先頭はリテラル文字 N で、その後に次の値(省略可)があります。 形式設定文字列の構文は次のとおりです。
   N<preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>
各要素の意味は次のとおりです。
  • <preceding_text> - 各値の前に続くリテラル テキスト。
  • *...* - リテラル アスタリスクでラップされた省略可能なブロック。数値の書式設定の詳細を指定できます。次の値を使用できます。これらはすべて省略可能です。
    • <number_type> - 数値の形式。次のいずれかを選択します。
      • f - [デフォルト] 浮動小数点形式。<decimal_places> 値を使用して、精度も指定することを検討してください。
      • p - パーセント形式。% 記号は自動的に追加されます。注: この形式を使用すると、0.0 ~ 1.0 のデータ値が 0 ~ 100% にマッピングされます(たとえば、0.43 は 43% として表示されます)。
      • e - 科学的記数法。
      • c<CUR> - 指定された通貨の数値を適切な通貨マーカーで表示します。<CUR> は、3 文字の通貨コードに置き換えます。例: ユーロは cEUR です。ISO ウェブサイトでコードのリストを確認できます(すべての記号がサポートされているわけではありません)。
    • <decimal_places> - 表示する小数点以下の桁数を指定する整数。値はこの長さに丸められます(切り捨てられません)。デフォルトは 2 です。
    • z - 末尾のゼロを表示します。デフォルトは「いいえ」です。
    • s - グループの区切り文字を表示します。デフォルトは「いいえ」です。
    • x または y - x 座標または y 座標のデータを、指定されたとおりに表示します。x データの意味はグラフの種類によって異なります。さまざまなグラフを試して、その意味を確認してください。デフォルトは 'y' です。
  • <following_text> - 各値に従うリテラル テキスト。
<opt_label_color>
軸テキストに適用する色(軸線ではなく)。RRGGBB の 16 進数形式。軸線の色は、opt_column_color を使用して個別に指定します。デフォルトはグレーです。
<opt_font_size>
[省略可] は、フォントサイズをピクセル単位で指定します。このパラメータはオプションです。
<opt_alignment>
(省略可): ラベルの配置。上軸または下軸の場合、ラベルはその上または下の目盛りマークにどのように位置するかを示します。左軸または右軸の場合は、軸に触れる境界ボックス内の位置を示します。次のいずれかの番号を指定します。
  • -1 - 上または下: ラベルは目盛りの右側に配置されます。左または右: ラベルは領域内で左揃えになります。R 軸ラベルのデフォルト。
  • 0 - 上または下: ラベルはティックの中心に配置されます。左または右: ラベルはその領域の中心に配置されます。X 軸と T 軸のラベルのデフォルト。
  • 1 - 上または下: ラベルは目盛りの左側、左または右: ラベルはその領域内で右揃えになります。Y 軸のラベルのデフォルト。
<opt_column_or_tick>。
(省略可。Google メーターではサポートされていません)この軸に目盛りマークや軸線を表示するかどうか。目盛りと軸線は最も内側の軸でのみ使用できます(たとえば、2 つの x 軸の外側ではサポートされません)。次のいずれかの値を使用します。
  • l(小文字の「L」) - 軸線のみを描画します。
  • t - 目盛りのみを描画します。目盛りは、軸ラベルの横にある小さな線です。
  • lt - [デフォルト] すべてのラベルに軸線と目盛りマークの両方を描画します。
  • _ -(アンダースコア)軸線も目盛りも描画しません。 軸線を非表示にするには、この値を使用します。
<〇 [色]>
(省略可Google メーターではサポートされていません)目盛りの色。RRGGBB の 16 進数形式で指定します。デフォルトはグレーです。
<opt_を支援しない色>
(省略可): この軸線の色。RRGGBB の 16 進数形式で指定します。デフォルトはグレーです。

 

説明

フォントサイズと色は、2 番目の X 軸(1 月、2 月、3 月)に指定されています。

左側に最小値、平均値、最大値、右側に 0、1、2、3、4、X 軸に沿って 0 ~ 100、その下に 1 月、2 月、3 月を示す青の折れ線グラフ

chxt=x,y,r,x
chxr=2,0,4
chxl=3:|Jan|Feb|Mar|
     1:|min|average|max
chxp=1,10,35,75
chxs=3,0000DD,13,0,t

フォントサイズ、色、配置は、右側の Y 軸に指定されます。 目盛りは表示されますが、軸線はありません。

X 軸に沿って 0 ~ 100、その下 1 月、2 月、3 月、Y 軸に 0 ~ 4、赤色の目盛り部分(最小値、平均値、最大値を示す赤色の目盛り)。

chxt=x,y,r,x
chxl=3:|Jan|Feb|Mar|
     2:|min|average|max
chxp=2,10,35,95
chxs=2,0000DD,13,-1,t,FF0000

このグラフには 3 つのデータセットがあり、3 つの軸ラベルのセットが 1 つのシリーズで 1 つ表示されます。以下で説明するように、ラベルの各セットはカスタムの書式設定文字列を使用してフォーマットされます。

  • 0N*e,000000|
    • 0 は最初のデータ系列を意味します
    • N は書式設定文字列を意味します。
    • * は形式指定子の開始を意味します。
    • e は科学的記数法を意味します
    • * は形式指定子の最後を意味します。
    • 000000 は黒いテキストを意味します。
  • 1N*cUSD*Mil,FF0000|
    • 1 は 2 つ目のシリーズを意味します。
    • N は書式設定文字列を意味します。
    • * は形式指定子の開始を意味します。
    • c は、通貨マーカーを意味します。
    • USD には、使用する通貨マーカーとして米ドルを指定します。
    • * は形式指定子の最後を意味します。
    • Mil は文字列に続くリテラルです
    • FF0000 は赤色のテキストを意味します。
  • 2N*sz2*,0000FF
    • 2 は、3 つ目のシリーズを意味します。
    • N は書式設定文字列を意味します。
    • * は形式指定子の開始を意味します。
    • s はグループ化指定子を表示することを意味します(英語(米国)では 3 つのゼロはすべてカンマになります)。
    • z2 は末尾の 2 つのゼロを表示することを意味します
    • 0000FF は青いテキストを意味します。

軸ラベルの範囲は、chxr パラメータ(max_indexstartendstep)を使用して設定します。設定しない場合、デフォルトでは 0 ~ 100 になります。


chd=s:
  984sttvuvkQIBLKNCAIi,
  DEJPgq0uov17zwopQODS,
  AFLPTXaflptx159gsDrn
chxr=
  0,0,1000000,250000|
  1,0,60|
  2,0,5000
chxs=
  0N*e,000000|
  1N*cUSD*Mil,FF0000|
  2N*sz2*,0000FF

トップへ戻る

軸の目盛りのスタイル chxtc

特定の軸の長い目盛りを指定できます。通常は、グラフの長さに合わせて目盛りを拡張するために使用します。目盛りの色を変更するには、chxs パラメータを使用します。

複数の軸の値を区切るには、パイプ文字(|)を使用します。シリーズ内の値は、カンマで区切る必要があります。

構文

chxtc=
  <axis_index_1>,<tick_length_1>,...,<tick_length_n>
    |...|
  <axis_index_m>,<tick_length_1>,...,<tick_length_n>
<軸軸>
適用軸です。chxt パラメータに対するゼロベースのインデックスです。棒区切りを使用して、軸ごとに値を区切ります。
<tick_length_1>、...、<tick_length_n>
その軸の目盛りの長さ(ピクセル単位)。単一の値を指定すると、すべての値に適用されます。複数の値が指定されている場合、軸の目盛りは、その軸の値のリストを循環します。正の値は、グラフ領域の外側に描画され、グラフの枠線でトリミングされます。正の最大値は 25 です。負の値はグラフ領域内に描画され、グラフ領域の境界でトリミングされます。

 

説明

chxtc を使用して長い赤目盛りマークを作成する例。この目盛りの長さはグラフ領域の幅を超えていますが、グラフに収まるようにトリミングされています。

  • chxt=x,y,r,x - 左軸、右軸、2 つの下軸を表示します。
  • chxl=2:|min|average|max|3:|Jan|Feb|Mar - 「r」(右側)と外側の x 軸に割り当てられたラベルテキスト。
  • chxp=2,10,35,95 - 3 つのラベルの r 軸に沿ったカスタムラベル位置(index=2)。
  • chxs=2,0000dd,13,-1,t,FF0000 - r 軸の軸ラベルスタイル: テキストの色、テキストサイズ、左揃え、赤色の目盛り付き。
  • chxtc=1,10|2,-180 - Y 軸と R 軸の軸の目盛りの長さ。最初の値は、軸の外側に 10 ピクセルの長さのティックを指定します。2 つ目の値は、軸内で 180 ピクセルの長さの目盛りを指定します。負の数値は、目盛りが軸内に収まることを意味します。目盛りはグラフに収まるように切り抜かれます。

X 軸は 0 ~ 100、その下の 1 月、2 月、3 月は折れ線グラフ、Y 軸は 0 ~ 4、赤色の目盛り部分(青色のテキスト、最小値、平均値、最大値)

chxt=x,y,r,x
chxl=
  2:|min|average|max|
  3:|Jan|Feb|Mar
chxp=2,10,35,95
chxs=
  2,0000dd,13,-1,t,FF0000
chxtc=1,10|2,-180

このグラフは目盛りの長さを交互に示しています。chxtc は、Y 軸に 2 つの目盛りの長さ(5 と 15)を指定し、グラフに描画されるティックは 2 つの値の間で交互に表示されます。
chxt=x,y
chxtc=
  1,5,15

トップへ戻る

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

グラフのデータ領域やグラフ全体に対して、塗りつぶしの色やスタイルを指定できます。塗りつぶしタイプには、単色塗りつぶし、ストライプ塗りつぶし、グラデーションなどがあります。さまざまな領域(グラフ領域全体、またはデータ領域のみなど)に対して、異なる塗りつぶしを指定できます。グラフ領域を塗りつぶすと、背景の塗りつぶしは上書きされます。すべての塗りつぶしは chf パラメータを使用して指定され、同じチャート内でさまざまな塗りつぶしタイプ(実線、ストライプ、グラデーション)を混在させる場合は、値をパイプ文字(|)で区切ってください。グラフの塗りつぶしはグラフの背景の塗りつぶしを上書きします。

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

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

構文

chf=<fill_type>,s,<color>|...
<fill_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、つまり約 50% の透明度)。テーブルセルの背景がグラフで表示されます。

青色の点で散布図。透明度 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
グラデーション フィルを指定します。
<angle>
勾配の角度(0(水平)~ 90(垂直))を指定する数値。
<color>
塗りつぶしの色(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
リニア ストライプ フィルを指定します。
<angle>
すべてのストライプの y 軸からの角度。縦縞には 0 を、横縞には 90 を使用します。
<color>
このストライプの色。RRGGBB の 16 進数形式で指定します。追加のストライプごとに <color> と <width> を繰り返します。2 つ以上のストライプが必要です。グラフが塗りつぶされるまでストライプが交互に表示されます。
<width>
このストライプの幅(01)。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

トップへ戻る

塗りつぶしchm [Line、Radar]

データ行の下の領域は塗りつぶし色で表示されます。

パイプ文字(|)を使用して、行の塗りつぶしを他の chm パラメータと組み合わせるには、chm パラメータを区切ります。

構文

chm=
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
    |...|
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
<b_or_B>
グラフの一番下まで塗りつぶすか、または下の線まで埋めるか。
  • B - <start_line_index> からグラフの一番下まで塗りつぶします。<end_line_index> は、グラフのセグメントを埋めることができる特別な構文をサポートしています。グラフに 1 本の折れ線を埋める場合、これが最も簡単です。
  • b - 複数系列グラフの 2 本線で塗りつぶします。開始行と終了行は <start_line_index><end_line_index> で示されます。
<color>
塗りつぶし色の RRGGBB 形式の 16 進数
<start_line_index>
塗りつぶしの開始行のインデックス。chd で指定された最初のデータ系列のインデックスはゼロ(0)で、2 番目のデータ系列のインデックスは 1 のように続きます。
<end_line_index>
  • 塗りつぶしタイプ「b」 - 塗りつぶしを停止する行。この行は、現在の行より下である必要があります。
  • 塗りつぶしタイプ「B」 - 次のいずれか
    • 任意の値 - このパラメータに含まれる任意の 1 つの数値が無視され、指定した線からグラフのベースまで塗りつぶしが行われます。
    • start:end - グラフの下にある縦のスライスを塗りつぶすには、start:end を指定します。これは、塗りつぶしの開始位置と停止位置を示すデータポイントのインデックスです。どちらの値も省略可能で、デフォルトは first_point:last_point です。(下記の例をご覧ください)。
<0>
予約済み - 0 にする必要があります。

 

説明

単一のシリーズの場合は、chm=B を使用するのが最も簡単です。線の領域全体に表示されます。

これは、レーダー チャートで使用できる唯一の塗りつぶしエリアの種類です。chm=b はレーダー チャートに対応していません。

グラフの下から青い線で網掛けした 1 本の線で、
chm=B,76A4FB,0,0,0

これは、2 本の線と 2 つの塗りつぶしを使用したグラフです。下の行と一番上の行の領域を塗りつぶすには、次に説明する特殊な手法が必要です。

グラフ上の 3 本の線。グラフでは下から 1 本目の線に網掛けなし、1 本目から 2 本目の線まで赤、2 本目から 3 本目までダークブルー、3 本目からグラフの上線まで網かけなし。デフォルトの黄色で線が引かれます
chd=s:
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,

chm=
b,224499,0,1,0|(青色)
b,FF0000,1,2,0|(赤色)

複数線グラフの場合、グラフの上部から 1 行目までを埋めるには、データ形式の最高データ値のコピーを 2 つ含む系列を含めます。たとえば、拡張エンコードの場合は「....」、基本テキスト形式の場合は「100,100」のようになります。このシリーズから一番上の行に記入します。

最後の線からグラフの最下部までを塗りつぶすには、データ形式の最も低いデータ値のコピーを 2 つ含む系列を含めます。 たとえば、拡張エンコードの場合は AAAA、基本テキスト形式の場合は 0,0 などです。

線自体は、chco を使用して黒色で描画されます。

グラフ上の 3 本の線。グラフは下から 1 本目の線まで緑色、1 本目から 2 本目まで赤、2 本目から 3 本目までダークブルー、3 本目からグラフの上方まで淡い青
chd=e:
  ....,
(最大値)
  cefhjkqwrlgYcfgc,
  QSSVXXdkfZUMRTUQ,
  HJJMOOUbVPKDHKLH,
  AAAA
(ゼロ値)
chm=
  b,76A4FB,0,1,0|
(明るい青)
  b,224499,1,2,0|(青)
  b,FF0000,2,3,0|(赤)
  b,80C65A,3,4,0(緑)
chco=000000

この図は、縦方向の塗りつぶしスライスを示した折れ線グラフです。そのためには、<end_line_index> に「start:end」ペアを指定し、行タイプを「B」に指定します。

  • B,76A4FB,0,0:3,0 - 線 0 の下の青色の垂直塗りつぶし。データポイント 0 ~ 3 で囲まれます。
  • B,990000,0,7:10,0 - データポイント 7 ~ 10 で囲まれている、0 行目の赤い縦塗りつぶし。
  • B,DEDC06,0,12:,0 - データポイント 12 から系列の末尾までの 0 行目の黄色の垂直塗りつぶし。

chm=
  B,76A4FB,0,0:3,0|
  B,990000,0,7:10,0|
  B,DEDC06,0,12:,0

この例は、レーダー チャートの線グラフを示しています。

レーダー チャート
chm=
  B,FF000080,0,1.0,5.0|
  B,FF990080,1,1.0,5.0

トップへ戻る

グリッド線 chg [Line、Bar、Radar、Scatter]

chg パラメータを使用して、グラフに実線または点線のグリッド線を指定できます。

このパラメータでは、線の太さや色は指定できません。グラフに線を描画するその他の方法については、シェイプ マーカーchm タイプ h、H、v、V)、範囲マーカーchm)、軸目盛りchxtc)をご覧ください。

構文

chg=
  <x_axis_step_size>,<y_axis_step_size>,<opt_dash_length>,<opt_space_length>,<opt_x_offset>,<opt_y_offset>
<x_max_step_size>、 <y_sha_step_size>
グラフに表示する x または y のグリッド線の数を計算するために使用されます。100 / step_size = グラフのグリッド線の数。つまり、20,25 は、垂直グリッド線 5 本と水平グリッド線 4 本を指します。
<opt_dash_length>、 <opt_space_length>
(省略可): 点線のグリッド線を定義します。最初のパラメータは、各行の破線の長さです(ピクセル単位)。 2 番目のパラメータはダッシュ間の間隔(ピクセル単位)です。実線の <opt_space_length> には 0 を指定します。デフォルト値は 4,1 です。
<opt_x_offset>、<opt_y_offset>
(省略可): グラフのスケールに従い、それぞれ x と y のグリッド線をオフセットするユニット数。正の値または負の値を指定できます。この値を指定する場合は、前述の値もすべて指定する必要があります。デフォルト値は 0,0 です。

 

説明

以下の例では、<x_axis_step_size> パラメータと <y_axis_step_size> パラメータのみを使用しています。Chart API を使用すると、デフォルトでグリッドの破線が表示されます。

縦に 5 つ、横に淡いグレーの 2 つの破線の折れ線グラフ
chg=20,50
縦に 5 つ、横に淡いグレーの 2 つの破線の折れ線グラフ
chg=20,50

この例では、より大きなスペースを使用して、明るいグリッド線(1,5)を表示します。

縦に 5 つ、水平にかすかに淡いグレー、淡いグレー、破線のグリッド線が表示された折れ線グラフ
chg=20,50,1,5

実線のグリッド線を表示するには、<opt_space_length> パラメータにゼロ(0)を指定します。

このグラフでは、X 軸のオフセットも 10 と指定されています。

垂直方向に 5 つ、水平方向に淡いグレーが 2 つの折れ線グラフ、実線のグリッド線
chg=20,50,1,0,10

このグラフでは、X 軸オフセットが 10、Y 軸オフセットが 20 となっています。

垂直方向に 5 つ、水平方向に淡いグレーが 2 つの折れ線グラフ、実線のグリッド線
chg=20,50,3,3,10,20

トップへ戻る

ダイナミック アイコン マーカー chem [Bar、Line、Radar、Scatter]

グラフを作成し、1 つ以上のダイナミック アイコンを化学値として指定します。chem の構文は次のとおりです。紫色の文字で区切られたアイテムはすべて省略可能で、URL でどれも省略できます。| 文字で区切られた複数の構文文字列を含めることで、複数のマーカーを含めることができます。動的アイコンについて詳しくは、動的アイコンのページをご覧ください。

動的グラフとして別のグラフ内にグラフを埋め込むこともできます。以下の埋め込みグラフのサブセクションをご覧ください。

chem=
  y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
|...| y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
s=<アイコンの文字列>
ダイナミック アイコン ページのダイナミック アイコンの文字列マーカー定数。この定数は、独立型アイコンの chst パラメータとほぼ同じです。ただし、独立アイコンのアイコン文字列が「d_」で始まっている場合は、このプレフィックスを削除して、同等のダイナミック アイコン マーカーを取得する必要があります。例: 独立型のアイコン: d_bubble_icon_text_small。同等の動的アイコン マーカー: bubble_icon_text_small
d=<マーカーデータの文字列>
この特定のマーカー タイプで必要なデータ。これは、同等の自立アイコンの chld パラメータで使用されるのと同じ文字列を保持します。ただし、すべての区切り文字はカンマに置き換える必要があります(複数行のテキストにはパイプ マーカーではなくカンマを使用してください)。データ文字列内では、次の文字も @ 記号でエスケープする必要があります。パイプ(|)、アット(@)、アットマーク(=)、カンマ(,)、セミコロン(;)など。例: hello@,+world5@@10+cents+each
ds=<シリーズ>>
(省略可): このマーカーが属するデータ系列のゼロベースのインデックス。デフォルト値は 0 です。
dp=<ポイント>
(省略可): マーカーの描画に使用するデータポイントを指定します。デフォルト値は 0(系列の最初の点)です。次のいずれかの形式を使用します。
  • n.d - マーカーを描画するデータポイント。n.d はシリーズ内のゼロベースのインデックスです。整数以外の値を指定すると、この分数は計算された中間点を示します。たとえば、3.5 はポイント 3 とポイント 4 の中間を意味します。
  • range,<start>,<end>,<step> - 開始から終了の範囲内のすべてのステップデータポイントにマーカーを描画します。開始と終了はインデックス値で、中間値を示す浮動小数点数にすることもできます。値はすべて省略可能です。デフォルト値は start=0、end=last item、step=1 です。値をスキップした場合でも、中間カンマを含める必要がありますが、空の末尾カンマを含める必要はありません。例: dp=range,0,4 は要素 0 ~ 4 にマーカーを描画します。dp=range,5,10,2 は要素 5、7、9 にマーカーを描画します。dp=range,2 は 3 番目以降のポイントに描画します。dp=range,3,,1.5 は 4.から最後の 1.5 までのデータポイントごとにマーカーを描画します。
  • all - すべての要素にマーカーを描画します。これは range,0,end_index と同じです。例: dp=all
  • every,n - N 番目のマーカーごとにマーカーを描画します。例: dp=every,2 は、アイテム 0、2、4 にマーカーを描画します。
py=<z_order>
(省略可)マーカーを描画するレイヤ。他のマーカーおよび他のすべてのグラフ要素と比較されます。-1.0 ~ 1.0 の浮動小数点数です。-1.0 が一番下、1.0 が一番上です。グラフの要素(線と棒)は 0 をわずかに下回っています。2 つのマーカーの値が同じ場合、URL で指定された順序で描画されます。デフォルト値は 0.0(グラフの要素のすぐ上)です。
po=<x,y>
(省略可): グラフ上のマーカーを描画する絶対位置。x と y は 2 つの浮動小数点数です。0.0,0.0 は左下隅、1.0,1.0 は右上隅です。
of=<x_offset,y_offset>
(省略可): アイコンを通常の位置からオフセットするピクセル数。x_offsety_offset は正または負の整数です。埋め込み型動的アイコンでは、この値を指定することが重要です。これは、マーカーがポイントの垂直方向と水平方向に中央揃えで配置されるため、ポイントがデータ マーカーと整合しない可能性があるためです。直立したピンの適切なオフセットは of=0,22 です。傾斜したピンの適切なオフセットは、傾きの方向に応じて of=-12,20 または of=12,20 ですが、場合によってはテストが必要です。デフォルト値は 0,0 です。

 

説明
自立した画像として作成し、折れ線グラフのマーカーとして使用する、同じダイナミック アイコンの例を示します。

グラフ 1: https://chart.googleapis.com/chart?chs=300x140&cht=lc&chco=FF9900,224499&
chd=t:75,74,66,30,10,5,3,1&chls=1|1&
chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0&chm=v,ccccFF,0,::.2,2

グラフ 2: https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000

動的なアイコン マーカーのある折れ線グラフ
chem=
  y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0


スタンドアロン画像と同じダイナミック アイコン マーカーです。


chst=
  d_bubble_icon_text_small
chld=
  ski|bb|Wheeee!|FFFFFF|000000

ダイナミック アイコン マーカーは、点の中心に水平方向と垂直方向に配置されます。そのため、テール付きの動的アイコンを使用する場合、テールはグラフのポイント上ではなく、マーカーの中心になります。最初のグラフでは、データポイント 3 をマークの中心にします。これにより、実際には線のマークの右側にテールが少し配置されます。

2 つ目のグラフでは、of 値を使用して、マーカーのテールを目的のデータポイントの上に移動しています。傾斜ピンの適切なオフセットは -12,20 です。


chem=y;
  s=map_xpin_letter;
  d=pin_sleft,A,FF0000;
  dp=3;
  ds=1



chem=y;
  s=map_xpin_letter;
  d=pin_sleft,A,FF0000;
  dp=3;
  ds=1;
  of=-12,0

複数のダイナミック アイコンを含めるには、構文文字列を | 文字で区切って繰り返します。

この例では、1 つの範囲と、2 つの個別のマーカーが示されています。

垂直ピンが 0.22 オフセットし、傾斜ピンのオフセットが 12,20 で、ピンポイントが記述されるシリーズと一致するようにしています。


chem=
  y;s=map_xpin_letter;d=pin_sright,A,FF0000;dp=4;ds=0;py=1;of=12,20|
  y;s=map_pin_icon;d=baby,FF5555;ds=1;dp=6;of=0,22|
  y;s=map_pin_icon;d=camping,DEF763;ds=2;dp=range,2,5
これは、複数行のテキスト マーカーを示しています。バブルはテキストに合わせてサイズ変更され、グラフの中心に再配置されるため、テキストの追加後はマーカーをオフセットする必要があります。テキスト内の改行は、d データ文字列のカンマで表されることに注意してください。
chem=y;
  s=bubble_texts_big;
  d=bbbr,FFC6A5,000000,Outlier,Forgot+to+feed;
  ds=0;
  dp=13;
  of=-120,2

埋め込みグラフ

動的アイコンの構文を使用して、あるグラフを別のグラフ内に埋め込むことができます。

埋め込みグラフ マーカーには、バブル内の埋め込みグラフとバブルなしの埋め込みグラフの 2 種類のスタイルがあります。両方の例を以下に示します。

バブルなしのグラフ
バブル付きグラフ
バブルを使用しないグラフ

バブル以外のチャートとバブルを埋め込んだグラフの両方について、s=<icon_string_constant>;d=<marker_data_string> パラメータの仕様は次のとおりです(前述のパラメータについてはここでは説明しません)。

構文

Non-bubble:
  chem=y;s=ec;d=<alignment_string>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>

Bubble:
  chem=y;s=ecb;d=<frame_type>,<padding>,<frame_color>,<fill_color>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>
alignment_string
[バブル以外] バブルのない埋め込みグラフのどの部分にデータポイントを固定するか。次の図で、2 文字の文字列定数のいずれかを選択します。アライメント文字列
グラフデータ
埋め込みグラフのデータ。これは、埋め込まれたグラフの URL の https://chart.googleapis.com/chart? より後の部分です。以下のツールを使用するか、ツールの下にリストされているルールに従ってください。
frame_type
(バブルのみ)ダイナミック アイコンのフレーム スタイル定数のいずれか。
パディング
[バブルのみ] バブルの内側のパディング(ピクセル単位)。
frame_color
[バブルのみ] フレームの色。# マークのない 6 桁の HTML カラー文字列。例: FF00FF
fill_color
[バブルのみ] バブルの塗りつぶしの色。# マークのない 6 桁の HTML カラー文字列で指定します。例: FF00FF

埋め込みグラフデータ

次の変換ツールを使用してグラフ文字列を生成するか、ツールの後に指定したルールに従ってチャート文字列を手動で生成します。

手動変換のルール

1. まず、パラメータと値のペアに含まれる以下のすべての文字を、以下の順序で置き換えます。

変更 これを
%7C または %7c
|
@
@@
%
25%
,
@、
|
@|
;
@
%26
=
%3D

2. 次に、parameter1=value1&parameter2=value2... ペアのすべての & 値と = 値をカンマに置き換えます。

トップへ戻る

シェイプ マーカー chm [Bar、Line、Radar、Scatter]

グラフ上のすべてまたは個々のデータポイントにグラフィカル マーカーを指定できます。2 つ以上のマーカーが同じポイントを占有している場合、マーカーは chm パラメータで指定された順序で描画されます。データポイント上にテキスト マーカーを作成することもできます。詳しくはデータポイントのマーカーをご覧ください。

パイプ文字(|)を使用してシェイプ マーカーを他の chm パラメータと組み合わせるには、chm パラメータを区切ります。

構文

マーキングするシリーズごとに、次のパラメータ セットを指定します。複数の時系列をマークするには、追加のパラメータ セットをパイプ文字で区切って作成します。すべてのシリーズをマークアップする必要はありません。データ系列にマーカーを割り当てない場合、マーカーは取得されません。

散布図では、図形マーカーの動作が少し異なります。詳細については、ドキュメントをご覧ください。

chm=
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
    |...|
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
@
(省略可): マーカー タイプの前にオプションの @ 文字を付ける場合は、<opt_Which_points> で x:y 形式を使用します。
<マーカー タイプ>
使用するマーカーのタイプ。次のいずれかのタイプを指定します。
  • a - 矢印
  • c - クロス
  • C - 長方形。長方形のマーカーの場合は、少なくとも 2 つのデータ系列が必要です。系列 0 は下端を指定し、系列 1 は上端を指定します。<size> は長方形の幅をピクセル単位で指定します。
  • d - ダイヤモンド
  • E - エラーバー マーカー()このマーカーを作成するには、2 つのデータ系列(最下部は値、上は 2 番目の系列)が必要です。また、拡張 <size> 構文(line_thickness[:top_and_Bottom_width])も公開されます。この top_and_Bottom_width は任意です。以下の例をご覧ください。
  • h - グラフを横方向に指定した高さの線。(<opt_Which_points> パラメータの有効な形式は n.d のみです)。
  • H - 指定されたデータマーカーを通る水平線。これにより、拡張された <size> 構文がサポートされます。この構文では、正確な線の長さを指定できます。line_thickness[:length] ここで、:length はオプションで、デフォルトはグラフの全幅です。
  • o - 円
  • s - スクエア
  • v - X 軸からデータポイントへの垂直線。
  • V - 調整可能な長さの垂直線。これは拡張の <size> 値構文をサポートしており、正確なライン長を指定できます。line_thickness[:length] ここで、:length はオプションで、デフォルトはグラフの全高です。 マーカーはデータポイントの中心に配置されます。
  • x - X
<color>
: このシリーズのマーカーの色。RRGGBB の 16 進数形式で指定します。
<series_index>
: マーカーを描画するデータ系列(0 から始まるインデックス)。h マーカーと、位置情報を x/y 位置(@ 文字で始める)で指定するマーカーでは無視されます。非表示のデータ系列は、マーカーのソースとして使用できます。詳細については、複合グラフをご覧ください。グループ化された縦棒グラフでは、マーカーを特定の棒に揃えるために、特別な拡張構文がサポートされています。
<opt_Which_points>。
(省略可): マーカーを描画するポイント。デフォルトはすべてのマーカーです。次のいずれかの値を使用します。
  • n.d - マーカーを描画する場所。意味は、マーカーのタイプによって異なります。
    • h を除くすべてのタイプ - マーカーを描画するデータポイント。n.d はシリーズ内のゼロベースのインデックスです。整数以外の値を指定すると、この分数は計算された中間点を示します。たとえば、3.5 はポイント 3 とポイント 4 の中間を意味します。
    • h - 0.0 から 1.0 までの数値です。0.0 はグラフの下、1.0 はグラフの上部です。
  • -1 - すべてのデータポイントにマーカーを描画します。このパラメータを空白のままにして、すべてのデータポイントに描画することもできます。
  • -n - n 番目のデータポイントごとにマーカーを描画します。浮動小数点値。n が 1 未満の場合は、追加の中間点が計算されます。たとえば、-0.5 を指定すると、データポイントの 2 倍の数のマーカーが配置されます。
  • start:end:n - 開始終了のインデックス値の範囲(n 個)のすべてのデータポイントにマーカーを描画します。すべてのパラメータは省略可能であるため(存在しない場合もあります)、3::1 は 4 つ目の要素から最後のステップ 1 までのステップ 1 になります。このパラメータを完全に省略すると、デフォルトで first:last:1 になります。すべての値を浮動小数点数で指定できます。startend を負の値に指定すると、最後の値から逆方向にカウントできます。開始終了の両方が負の場合は、値が増加している値(-6:-1:1 など)になるようにします。 n ステップの値が 1 未満の場合は、指定したデータ値を補間して追加のデータポイントを計算します。デフォルト値は first:last:1 です。
  • x:y - グラフの特定の x または y ポイントにマーカーを描画します。この点は線上に沿う必要はありません。このオプションを使用するには、マーカータイプの前に @ 文字を追加します。座標を浮動小数点値として指定します。0:0 はグラフの左下、1:1 はグラフの右上隅です。たとえば、15 ピクセルの赤色のひし形をグラフの中心に追加するには、@d,FF0000,0,0.5:0.5,15 を使用します。
<size>
マーカーのサイズ(ピクセル単位)。ほとんどのパラメータはこのパラメータの値を 1 つしか使用しません。V、H、S マーカーでは <size>[:width] の構文がサポートされます。オプションの 2 つ目の部分では、ラインまたはマーカーの長さを指定します。
<opt_z_order>
(省略可): マーカーを描画するレイヤ。他のマーカーおよび他のすべてのグラフ要素と比較されます。-1.0 ~ 1.0 の浮動小数点数です。-1.0 が一番下、1.0 が一番上です。グラフの要素(線と棒)は 0 未満です。2 つのマーカーの値が同じ場合、URL で指定された順序で描画されます。デフォルト値は 0.0(グラフの要素のすぐ上)です。
<opt_offset>
(省略可): 指定した場所からの水平オフセットと垂直オフセットを指定できます。区切り文字「reserved:<horizontal_offset>:<vertical_offset>」を使用する構文は次のとおりです。指定すると、<opt_z_order> の chm パラメータ文字列に空の ,, 値を含めることができます。例: o,FF9900,0,4,12,,:10 o,FF9900,0,4,12.0,,:-10:20 o,FF9900,0,4,12,1,::20
  • Reserved - 空欄のままにします。
  • <horizontal_offset> - 水平オフセットを指定する正または負の数値(ピクセル単位)。省略可。使用しない場合は空白のままにします。
  • <vertical_offset> - 垂直オフセットを指定する正または負の数値(ピクセル単位)。省略可。使用しない場合は空白のままにします。

 

説明

複数のシェイプや線マーカーの例を以下に示します。

  • a,990066,0,0.0,9.0 - 紫色の矢印、最初の系列、最初の点、サイズ 9。
  • c,FF0000,0,1.0,20.0 - 赤十字、最初の系列、2 つ目の点、サイズ 9。
  • d,80C65A,0,2,20.0 - 緑色のひし形、最初のシリーズ、3 つ目の点、サイズ 9。
  • H,000000,0,3,1:40 - 黒色の横線、最初の系列、データポイント 3、幅 1 ピクセル、長さ 40 ピクセル。
  • o,FF9900,0,4.0,12.0 - オレンジ色の円、最初のシリーズ、5 番目の点、サイズ 12。
  • s,3399CC,0,5.0,11.0 - 青い四角形、最初の系列、6 番目の点、サイズ 11。
  • v,BBCCED,0,6.0,1.0 - 垂直線(最初の点まで)、最初の時系列、7 つ目の点、幅 1 ピクセル。
  • V,3399CC,0,7.0,1.0 - グラフの下から上への垂直線、最初の系列、8 つ目の点、幅 1 ピクセル。
  • x,FFCC33,0,8.0,20.0 - 黄色の「X」、最初のシリーズ、9 番目のポイント、サイズ 20。
  • H,FFFF00,0,9,2 - データポイント 9 のグラフの横幅の黄色の線。
  • h,FF0000,0,0.5,1 - 指定された高さの赤い水平線、1 つ目の系列、グラフの半分、幅 1 ピクセル。
マーカーのある折れ線グラフ
chm=
  a,990066,0,0.0,9.0|
  c,FF0000,0,1.0,20|
  d,80C65A,0,2.0,20.0|
  H,000000,0,3,1:40|
  o,FF9900,0,4.0,12.0|
  s,3399CC,0,5.0,11.0|
  v,BBCCED,0,6,1.0|
  V,3399CC,0,7,1.0|
  x,FFCC33,0,8,20|
  H,FFFF00,0,9,2|
  h,FF0000,0,0.5,1

以下は、1 つのデータ系列にひし形、もう 1 つのデータ系列に円を使用した例です。

2 つ以上のマーカーが同じポイントを占有している場合、マーカーは chm パラメータに表示されている順序で描画されます。ここでは、円は chm で指定された最初のマーカーであるため、最初に描画されます。ひし形は 2 番目に指定されて描画されるため、円の上に描画されます。

折れ線グラフの場合、各データポイント上に 15 ピクセルの円があり、もう一方の線に 10 ピクセルのひし形が表示されている。両線に共通する点にひし形が描画される
chm=
  o,FF9900,0,-1,15.0|
  d,FF0000,1,-1,10.0

次の折れ線グラフは、1 秒ごとのデータポイントにマーカーを配置したものです(-2 は他のすべてのポイントを意味します)。

1 秒おきにマーカーが配置された折れ線グラフ
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-2,6
次のグラフは、データポイントの 2 倍のマーカーを含む折れ線グラフです(-0.5 は 0.5 ポイントごとに意味します)。 1 秒おきにマーカーが配置された折れ線グラフ
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-.5,6
この例では、h マーカーと v マーカーを使用して、カスタムの配線と太さのグリッド線を作成する方法を示しています。Z オーダーの値(最後の値)は -1 に設定されており、データ線の下にグリッド線が描画されます。
1 秒おきにマーカーが配置された折れ線グラフ
chm=
  h,76A4FB,0,0:1:.2,2,-1|
  V,76A4FB,0,::2,0.5,-1

このグラフでは、折れ線グラフに縦方向の塗りつぶし線が追加されています。

  • v - グラフの垂直線。
  • FF0000 - 赤色の線
  • 0 - 系列インデックス
  • : :.5 - 範囲指定子: 開始から終了まで、0.5 ポイントごと。
  • 2 - 太さ 2 ピクセル。
1 秒おきにマーカーが配置された折れ線グラフ
chm=
  v,FF0000,0,::.5,2
この例では、正確な座標を使用して、グラフに矢印とテキスト マーカーを追加しています。最初の D マーカーは、棒の下にあるトレース線です。2 つ目のマーカーは矢印で、3 つ目のマーカーは矢印テキストです。
chm=
  D,003971,1,0,3|
  @a,000000,0,.25:.75,7|
  @tExpected,000000,0,.35:.85,10
特定のデータポイント(H)に固定された水平線は、相対値を表示する場合や、グラフ上のデータ値の高さを強調する場合に役立ちます。
chm=H,FF0000,0,18,1

このグラフは、<size> パラメータで線の太さと長さを指定できるマーカーを示しています。

  • E,000000,0,6,1:20 - 黒いエラーバー(縦 1 ピクセルの線、上下バー 20 ピクセル)下はシリーズ 0 ポイント 8 に固定され、下はシリーズ 1 ポイント 8 に固定されます。
  • H,990066,1,2,5:50 - 紫色の横線、幅 5 ピクセル、データポイント 2 を中心とする長さ 50 ピクセル。
  • V,3399CC,0,8,3:50- 青色の縦線: 幅 3 ピクセル、長さ 50 ピクセル、データポイント 8 を中心とする。

chm=
  E,000000,0,6,1:20|
  H,990066,1,2,5:50|
  V,3399CC,0,8,3:50

トップへ戻る

テキスト / データ値マーカー chm [Bar、Line、Radar、Scatter]

グラフ内の特定のポイントには、カスタム テキストまたは特定の時点でのデータ形式のバージョンを使用してラベルを付けることができます。

パイプ文字(|)を使用して chm マーカーを結合し、chm パラメータ セットを区切ることができます。

文字列値に関する注意事項: ラベル文字列に使用できるのは URL セーフの文字のみです。念のため、文字セット 0-9a-zA-Z に含まれていない文字を含むすべての文字列を URL エンコードする必要があります。URL エンコーダは、Google の可視化に関するドキュメントにあります。

構文

マーキングするシリーズごとに、次のパラメータ セットを指定します。複数の時系列をマークするには、追加のパラメータ セットをパイプ文字で区切って作成します。すべてのシリーズをマークアップする必要はありません。データ系列にマーカーを割り当てない場合、マーカーは取得されません。

chm=
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
    |...|
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
<マーカー タイプ>
使用するマーカーのタイプ。次のタイプから選択できます。
  • f<text> - テキストを含むフラグ。「f」の文字に続けて、カスタム URL エンコード テキストを指定します。テキスト マーカー内でカンマをエスケープするには、カンマの前に \ マークを付けます。例: fHello\,+World!
  • t<text> - シンプルなテキスト マーカー。「t」の文字に続いて、カスタム URL エンコード テキストを指定します。テキスト マーカー内でカンマをエスケープするには、カンマの前に \ マークを付けます。例: tHello\,+World!
  • A<text> - アノテーション マーカー。これはフラグ マーカーに似ていますが、マーカーが重複しないように位置を調整します。<opt_Which_points> の有効な形式は n.d で、系列内の点のインデックスを示します。
  • N<formatting_string> - この時点でのデータの値(オプションの形式)。chds パラメータ(カスタム スケーリング)を使用しない場合は、エンコード済みの値が得られます。このパラメータを任意のフォーマット タイプで使用すると、指定した範囲で値がスケーリングされます。 数値マーカーを含む chds の例を以下に示します。この積み上げ棒グラフで、<series_index> に -1 を指定すると、積み上げ棒グラフのすべての値の合計を示すマーカーが表示されます。フォーマット文字列の構文は次のとおりです。
       <preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>
    これらの要素はすべて省略可能です。各要素の意味は次のとおりです。
    • <preceding_text> - 各値の前のテキスト。
    • *...* - リテラル アスタリスクでラップされた省略可能なブロック。数値の書式設定の詳細を指定できます。次の値を使用できます。これらはすべて省略可能です。
      • <number_type> - 数値の形式。次のいずれかを選択します。
        • f - [デフォルト] 浮動小数点形式。<decimal_places> 値を使用して、精度も指定することを検討してください。
        • p - パーセント形式。% 記号は自動的に追加されます。注: この形式を使用する場合、0.0 ~ 1.0 のデータ値は 0 ~ 100% にマッピングされます(たとえば、0.43 は 43% と表示されます)。
        • e - 科学的記数法。
        • c<CUR> - 指定された通貨の数値を適切な通貨マーカーで表示します。 <CUR> は、3 文字の通貨コードに置き換えます。(例: ユーロの場合は cEUR)。ISO ウェブサイトでコードのリストを確認できます(すべてのシンボルがサポートされているわけではありません)。
      • <decimal_places> - 表示する小数点以下の桁数を指定する整数。値はこの長さに丸められます(切り捨てられません)。デフォルトは 2 です。
      • z - 末尾のゼロを表示します。デフォルトは no です
      • s - グループの区切り文字を表示します。デフォルトは「いいえ」です。
      • x または y - x 座標または y 座標のデータを、指定されたとおりに表示します。x データの意味はグラフの種類によって異なります。さまざまなグラフを試して、その意味を確認してください。デフォルトは 'y' です。
    • <following_text> - 各値に従うテキスト。
<color>
このセットのマーカーの色。RRGGBB の 16 進数形式で指定します。
<series_index>
: マーカーを描画するデータ系列(0 から始まるインデックス)。これが積み上げ棒グラフで、マーカー タイプが N(データポイントの値)の場合、-1 を指定すると、積み重ねられた棒グラフごとに合計値マーカーが作成されます。以下に例を示します。
<opt_Which_points>。
(省略可): マーカーを描画するポイント。デフォルトはすべてのマーカーです。次の値のいずれかを使用できます。
  • n.d - マーカーを描画するデータポイント。n.d はシリーズ内のゼロベースのインデックスです。整数以外の値を指定すると、この分数は計算された中間点を示します。たとえば、3.5 はポイント 3 とポイント 4 の中間を意味します。
  • -1 - すべてのデータポイントにマーカーを描画します。このパラメータを空白のままにして、すべてのデータポイントに描画することもできます。
  • -n - n 番目のデータポイントごとにマーカーを描画します。
  • start:end:n - 開始終了インデックス値の範囲内の n 番目のデータポイントすべてにマーカーを描画します。すべてのパラメータは省略可能であるため(存在しない場合もある)、3::1 は 4 つ目の要素から最後のステップ 1 までのステップ 1 になります。このパラメータを省略すると、デフォルトで first:last:1 になります。すべての値を浮動小数点数で指定できます。startend を負の値に指定すると、最後の値から逆方向にカウントできます。startend の両方が負の値の場合は、値を増やすようにリストします(例: -6:-1:1)。n ステップの値が 1 未満の場合は、指定したデータ値を補間して追加のデータポイントを計算します。デフォルト値は first:last:1 です。
  • x:y - [N 型マーカーではサポートされていません] グラフの特定の x または y 点にマーカーを描画します。このポイントは、必ずしもオンライン上にある必要はありません。このオプションを使用するには、マーカータイプの前にアット文字(@)を追加します。座標を浮動小数点値として指定します。0:0 はグラフの左下、0.5:0.5 はグラフの中心、1:1 はグラフの右上隅です。たとえば、15 ピクセルの赤色のひし形をグラフの中心に追加するには、@d,FF0000,0,0.5:0.5,15 を使用します。
<size>
マーカーのサイズ(ピクセル単位)。3 つ目のデータ系列(ポイントサイズの指定に使用)を含む散布図の場合、この値はデータ範囲に応じてスケーリングされます。したがって、データ範囲が 0 ~ 100、<size> が 30 の場合、データ値 100 は 30 ピクセル、データ値 50 は幅 15 ピクセル、というように続きます。
<opt_z_order>
(省略可): マーカーを描画するレイヤ。他のマーカーおよび他のすべてのグラフ要素と比較されます。-1.0 ~ 1.0 の浮動小数点数です。-1.0 が一番下、1.0 が一番上です。グラフの要素(線と棒)は 0 未満です。2 つのマーカーの値が同じ場合、URL で指定された順序で描画されます。デフォルト値は 0.0(グラフ要素のすぐ上)です。
<opt_placement>
(省略可): データポイントを基準にしてこのマーカーを配置する場所を紹介する追加の詳細。水平方向または垂直方向の相対位置、オフセットを指定できます。プレースメントの構文は、以下のように「:」区切り文字を含む文字列です。すべての要素は任意です(<horizontal_and_vertical_justification>:<horizontal_offset>:<vertical_offset>)。指定すると、<opt_z_order> の chm パラメータ文字列に空の ,, 値を含めることができます(例: N,000000,0,1,10,,bN,000000,0,1,10,,lvN,000000,0,1,10,,r::10)。
水平方向と水平方向の両端揃え
マーカーのアンカー ポイント。この場合、両端揃えとは逆の動作になるため、左アンカーでは実際にマーカーはデータポイントのに配置されます。次のリストから水平または垂直の両端揃えを選択できます。
  • 水平方向の配置: 「l」、「h」、「r」 - 左、中央、または右にアンカー。デフォルトは 'l' です。
  • 垂直配置: 「b」、「v」、「t」 - 下、中央、またはアンカー(垂直)。デフォルトは「b」です。
  • 棒グラフでの比較表示(棒グラフのみ): 「s」、「c」、「e」 - 棒、中央、または棒の上部。積み上げ棒グラフの場合、これは棒グラフ全体ではなく、各シリーズの棒のセクションに対する相対値となります。シリーズ系インデックスが -1(スタック合計)の場合、棒全体に対する相対順序になります。この値は、縦向きのプレースメント値(「be」や「vs」など)と組み合わせることができます。デフォルト値は「e」です。
horizontal_offset
このマーカーの水平オフセット(ピクセル単位)。デフォルトは 0 です。
vertical_offset
このマーカーの垂直オフセット(ピクセル単位)。棒グラフ以外: デフォルト 15、棒グラフのデフォルト: 2

説明

棒グラフに表示される値ラベルの例を以下に示します。

最初のグラフ(N*p0*)は、データ値マーカーを指定します。値はパーセント値で表示され、小数点以下 0 桁に四捨五入されて 11 ポイントのテキストになります。データ値はすべて 0.0 ~ 1.0 で、パーセント形式では小数点以下 2 桁上に移動します。

2 番目のグラフ(N*cEUR1*)は、同じ値をユーロ値、10 進法で表した小数点以下 1 桁、11 ポイントのテキストで示します。

各棒の上に割合ラベルが表示された棒グラフ
chm=
  N*p0*,000000,0,-1,11
chd=t:
  0.4356,0.3562,0.4834,0.575,0.673,0.6091


各棒の上にユーロラベルが表示された棒グラフ


chm=
  N*cEUR1*,000000,0,-1,11

chds パラメータを使用して、表示される数値をスケーリングできます。chds は、単純なエンコードや拡張されたエンコードを含め、すべてのデータ形式に使用できます。これは、バーのサイズや軸ラベルには影響せず、データ マーカーの値のみに影響します。

次の例は、46、39、29、30、43、41 のシンプルな値がエンコードされたグラフです。シンプルなエンコード範囲は 0 ~ 61 です。chds パラメータでは、カスタム マーカー(0 ~ 1)のスケールが定義されているため、マーカーの値はこの範囲にスケーリングされます。ただし、バーの高さは影響を受けません(テキスト形式のデータの場合はバーもスケーリングされます)。


chd=s:underp
chm=N,000000,0,-1,11
chds=0,1

テキストポイントの最小点とフラグラベルの最大値を持つグラフの例を示します。

10 点の青いテキストラベルが付いた折れ線グラフと 15 点の赤いテキストで示された旗が緑の破線のデータポイントに描画されている。
chm=
  tMin,0000FF,0,1,10|
  fMax,FF0000,0,3,15

この例は、個々の系列の値と系列の合計値を含む積み上げグラフを示しています。積み上げ系列値を表示するには、「c」位置オプションを使用する必要があります。そうしなかった場合、上部の棒の値は、各棒の最上部の合計値と重なります。
chm=
  N,FF0000,-1,,12|
  N,000000,0,,12,,c|
  N,000000,1,,12,,c|
  N,ffffff,2,,12,,c
垂直方向と水平方向の配置の仕組みをさらに示す。この例では、棒グラフのアンカー値のさまざまな組み合わせを示しています(縦配置には s、c、e を使用します)。右のアンカーでマーカーを左に、上部のアンカーでマーカーを下に移動します(その逆)。赤い点は、各棒のベース、中央、上部を示しています。 数値はデータ値であり、棒ごとにさまざまなアンカー値を使用して固定されています。
chm=
  N,000000,0,0,10,,rs
  N,000000,0,1,10,,ls
  N,000000,0,2,10,,c
  N,000000,0,3,10,,e
  N,000000,0,4,10,,e::15
  N,000000,0,5,10,,e::-12
重なり合わないように、アノテーション マーカーはラベルの位置を自動的に調整します。最初の chm 値は線の塗りつぶしです。以下の値はすべてアノテーション マーカーです。 アノテーション マーカー。
chm=B,C5D4B5BB,0,0,0
  AA,666666,0,3,15
  AB,666666,0,5,15
  AC,666666,0,24,15
  AD,666666,0,25,15
  AE,666666,0,26,15
  AF,666666,0,51,15
  AG,666666,0,60,15
  AH,666666,0,73,15
  AI,666666,0,80,15
  AJ,666666,0,99,15
別のアノテーション マーカーの例で、スイスの都市高度を表す例。

トップへ戻る

範囲マーカー chm [Bar, キャンドルスティック, Line, Radar, Scatter]

水平方向または垂直方向に帯状に背景を塗りつぶすと、グラフの特定の領域をハイライト表示できます。

パイプ文字(|)を使用して任意の chm マーカーを組み合わせるには、chm パラメータ セットを区切ります。

構文

描画する帯域ごとに、次のパラメータ セットを指定します。複数の帯域を描画するには、追加のパラメータ セットをパイプ文字で区切って作成します。範囲は指定した順序で描画されるため、最後に描画された範囲が前の範囲の上に描画されます。

chm=
  <direction>,<color>,0,<start_point>,<end_point>
    |...|
  <direction>,<color>,0,<start_point>,<end_point>
<direction>
水平または垂直の色合いを指定します。水平範囲には r を、垂直範囲には R を使用します。
<color>
範囲の色。RRGGBB の 16 進数形式で指定します。
0
予約済み - 0 にする必要があります。
<start_point>
範囲の開始位置。
  • 水平範囲マーカーの場合、これは Y 軸上の位置です。0.00 はグラフの下部、1.00 はグラフの上部です。
  • 縦方向のマーカーの場合、これは X 軸の位置です。0.00 はグラフの左側、1.00 はグラフの右側です。
<end_point>
範囲の終了位置。
  • 水平範囲マーカーの場合、これは Y 軸上の位置です。0.00 はグラフの下部、1.00 はグラフの上部です。
  • 縦方向のマーカーの場合、これは X 軸の位置です。0.00 はグラフの左側、1.00 はグラフの右側です。

 

説明

範囲マーカーには、細い線や色の帯を使用できます。

  • r,E5ECF9,0,0.75,0.25 - 範囲マーカー、淡い青、(予約済み)、グラフの高さの 0.5。
  • r,000000,0,0.1,0.11 - 範囲マーカー(黒、予約済み)は、y 軸の上の 0.1 の位置から始まり、y 軸の上の 0.11 の位置(細い黒い線)で終わります。
Y 軸の上の 25% から 75% まで伸びた淡い水平の帯と、Y 軸の上の 10% の細い水平線を持つ折れ線グラフ
chm=
  r,E5ECF9,0,0.75,0.25|
  r,000000,0,0.1,0.11

この例は、垂直範囲マーカーを示しています。最初のマーカーは赤い線(FF0000)で、2 つ目は淡い青色の帯(A0BAE9)です。

淡い青色の縦の帯(X 軸に沿って 25 ~ 75% に伸び、縦に細い X 軸に沿って 10% の縦線)を示した折れ線グラフ
chm=
  R,FF0000,0,0.1,0.11|
  R,A0BAE9,0,0.75,0.25

マーカーは指定された順序で描画されます。この例では、垂直の赤色のマーカーが淡い青色の水平マーカーの前に描画されていることがわかります。

青色の垂直バンドと淡い青色の水平バンドの折れ線グラフ。それぞれ x 軸と y 軸に沿って 25 ~ 75% の位置に伸びています。細い縦の赤い線と細い水平の黒い線がそれぞれ x 軸と y 軸に沿って 10% の距離にある
chm=
  R,FF0000,0,0.1,0.11|
  R,A0BAE9,0,0.75,0.25|
  r,E5ECF9,0,0.75,0.25|
  r,000000,0,0.1,0.11

折れ線グラフでは、範囲マーカーを使用して、グラフ上にゼロ線、中点線、上部に横線が描画されます。

1 本の黄色の線と横線 3 本の等間隔のスパークライン
chm=
  r,000000,0,0.499,0.501|
  r,000000,0,0.998,1.0|
  r,000000,0,0.0,0.002

トップへ戻る

キャンドルスティック マーカー chm=F [Bar、Line]

キャンドルスティック マーカーは、データ系列の分散と方向変化を示します。多くの場合、1 日の株価を表示します。マーカーには、高い値と低い値に加えて、特定の期間(通常は 1 日)の開閉値を示すセグメントが含まれています。ろうそく立てマーカーについて詳しくは、こちらをご覧ください。

ろうそく立てマーカーは、縦線で 2 本線で囲んだ長方形として描画されます。ろうそく立てマーカーを描画するには、4 つのデータ系列が必要です。各系列で次のように指定します。

  • シリーズ 1 と 4 は、それぞれ縦線の下部と上部を指定します。通常、これらの値はその日の低い値と高い値を表します。
  • シリーズ 2 と 3 では、長方形の縦の枠線を指定します。シリーズ 2 はオープニング値、シリーズ 3 はクロージング 値です。長方形の色は、どの色がそれが高いかによって異なります。開始値(シリーズ 2)が終了値(シリーズ 3)よりも低い場合、価格は上がり、長方形はデフォルトで塗りつぶし緑色になります。開始値(シリーズ 2)は終了値(シリーズ 3)より高い場合は価格が下がり、デフォルトでは長方形の赤色で塗りつぶされます。長方形の塗りつぶし色を指定できるのは、値が減少する場合のみです。これを指定すると、値が増加している長方形が空白になります(空白になる)。シリーズ 2 は、価格が上昇または下降したかどうかに応じて、長方形の上部または下部のいずれかになります。

パイプ文字(|)を使用して chm パラメータを区切るには、ろうそくマーカーをその他の chm パラメータと組み合わせることができます。

注: マーカーの描画に使用するデータの線をグラフに表示したくない場合は、形式設定のタイプの後に 0 を含める必要があります。例: テキスト形式のデータ文字列内の chd=t0:10,20,30,40。詳しくは、複合グラフをご覧ください。

以下に示す例は、各系列の行を示しています。

構文

chm=
  F,<opt_declining_color>,<data_series_index>,<opt_which_points>,<width>,<opt_z_order>
F
これはろうそくマーカーであることを示します。
<opt_decline_color>
(省略可)値が下がっている場合(シリーズ 2 の値 > 対応するシリーズ 3 の値の場合)、長方形の塗りつぶし色。これは RRGGBB 形式の 16 進数です。値を増やすと、長方形は空になります。デフォルトは緑色で点灯、赤では減少します(値の増減にカスタムの塗りつぶし色を指定することはできません)。
<data_series_index>
ろうそく立てマーカーの最初のシリーズとして使用するデータ系列のインデックス。これは 0 から始まるインデックスです。したがって、ここで 1 を指定していて、6 つのシリーズがある場合は、2 番目、3 番目、4 番目、5 番目のシリーズがろうそく立てマーカーの描画に使用されます。
<opt_Which_points>
(省略可): マーカーの描画に使用するデータポイントを指定します。デフォルトはすべてのマーカーです。次のいずれかの形式を使用します。
  • n.d - シリーズ内の 1 つのポイントにマーカーを描画します。ここで、n.d はシリーズ内のポイントのインデックスです。整数以外の値を指定すると、この分数は計算された中間点を示します。たとえば、3.5 はポイント 3 とポイント 4 の中間を意味します。
  • -1 - すべてのデータポイントにマーカーを描画します。このパラメータを空のままにして、すべてのマーカーに描画することもできます。
  • -n - n 番目のデータポイントごとにマーカーを描画します。
  • start:end:n - 開始終了のインデックス値の範囲に含まれるすべてのn番目のデータポイントにマーカーを描画します。すべてのパラメータは省略可能であるため(存在しない場合もあります)、3::1 は 4 つ目の要素から最後のステップ 1 までのステップ 1 になります。このパラメータを完全に省略すると、デフォルトで first:last:1 になります。すべての値を浮動小数点数で指定できます。startend を負の値に指定すると、最後の値から逆方向にカウントできます。startend の両方が負の値の場合は、値を増やすようにリストします(例: -6:-1:1)。n ステップの値が 1 未満の場合は、指定したデータ値を補間して追加のデータポイントを計算します。デフォルト値は first:last:1 です。
<width>
すべての長方形の幅(ピクセル単位)。
<opt_z_order>
(省略可): マーカーを描画するレイヤ。他のマーカーおよび他のすべてのグラフ要素と比較されます。-1.0 ~ 1.0 の浮動小数点数です。-1.0 が一番下、1.0 が一番上です。グラフの要素(線と棒)は 0 未満です。2 つのマーカーの値が同じ場合、URL で指定された順序で描画されます。デフォルト値は 0.0(グラフの要素のすぐ上)です。

 

説明

次に示すのは、4 つの系列が描画された折れ線グラフのキャンドルスティック マーカーの例です。カスタムの塗りつぶし色 0000FF(青)が指定され、この色は、シリーズ 3 のポイントがシリーズ 2 の同等のポイントよりも小さい場合に長方形を塗りつぶすために使用されます。

最初と最後の長方形はグラフによってトリミングされます。これらの値を排除するには、chm の 4 番目のパラメータに 1:4 を指定します。

データ文字列のゼロをメモし、系列 chd=t0 の行を非表示にします。 これは、すべてのグラフデータがマーカーに使用されることを示しています。

<Which_point> パラメータは空白です。これにより、すべてのデータポイントにろうそく立てが描画されます。

4 本のオレンジ色の線と 4 本の財務マーカーがある折れ線グラフ

chd=t0:
  0, 5,10, 7,12, 6|
  35,25,45,47,24,46|
  15,40,30,27,39,54|
  70,55,63,59,80,60
chm=F,0000FF,0,,20

デフォルトの色を使用し、最初と最後のアイテムを削除している同じグラフの例を示します。

これは複合グラフです。折れ線グラフ(基本グラフの種類)とキャンドルスティック マーカーを組み合わせたものです。cht=t:1 の値が 1 の場合、最初のグラフより後のすべてのデータ系列を基本グラフタイプ(折れ線グラフ)に表示しないようにする必要があります。chm=F,,1,1:4,20 の最初の 1 文字は、キャンドルスティックのデータが系列 2、3、4、5 から取得されたことを意味します(1 はゼロベースです)。このような複合グラフを描画する方法については、複合グラフをご覧ください。

1 本のオレンジ色の線と 4 本の財務マーカーを含む折れ線グラフ。
cht=lc
chm=
  F,,1,1:4,20

chd=t1:
  15,40,30,27,39,54|
  ...

トップへ戻る

線マーカー chm=D [Bar, キャンドルスティック, Line, Radar, Scatter]

グラフのデータをトレースする線を追加できます。多くの場合、複合グラフで使用されます。

複数の行を追加する(または他の chm マーカーと組み合わせる)には、パイプ(|)区切り文字を使用して chm パラメータ セットを分割します。このパラメータで点線のマーカーを作成することはできません。

構文

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
D
これは線マーカーであることを示します。
<color>
ラインの色。RRGGBB の 16 進数形式で指定します。
<series_index>
線の描画に使用されるデータ系列のインデックス。データ系列のインデックスは、最初のデータ系列は 0、2 番目のデータ系列は 1 というようになります。
<ポイント数>
ラインの描画に使用するシリーズのどのポイントを使用するか。次の値のいずれかを使用できます。
  • 0 - 一連のポイントをすべて使用します。
  • start:end - 開始から終了までの時系列の特定のポイント範囲を使用します(ゼロベースのインデックス)。浮動小数点値を使用して中間点を指定することもできます。また、start または end を空白のままにして、最初と最後のデータポイントをそれぞれ表すこともできます。startend は、最後の値からの逆のインデックスとして負の値にすることもできます。startend の両方が負の値の場合は、値が大きい値(-6:-1 など)に書き込んでください。
<size>
ラインの幅(ピクセル単位)。
<opt_z_order>
(省略可): マーカーを描画するレイヤ。他のマーカーおよび他のすべてのグラフ要素と比較されます。-1.0 ~ 1.0 の浮動小数点数です。-1.0 が一番下、1.0 が一番上です。グラフの要素(線と棒)は 0 未満です。2 つのマーカーの値が同じ場合、URL で指定された順序で描画されます。デフォルト値は 0.0(グラフの要素のすぐ上)です。

 

説明

これは、棒グラフにマーカーの線を引く例です。 Z オーダーは 1 に設定されているため、線は棒の上に描画されます。

この例では、棒グラフとデータラインの両方に同じデータを使用しています。
線マーカー付きの棒グラフ
chm=D,0033FF,0,0,5,1
chd=s:1XQbnf4

これは同じ棒グラフですが、折れ線グラフ専用のデータ系列が追加されています。これは複合グラフの例です。複合グラフを描画するには、chd パラメータにデータ系列を追加し、追加のデータ系列を「無視」するように chd に値を追加します。

詳しくは、複合グラフをご覧ください。

線マーカー付きの棒グラフ
chm=D,0033FF,1,0,5,1
chd=s1:1XQbnf4,43ksfg6

トップへ戻る

データ関数 chfd [すべてのchdグラフ]

muParser の関数構文を使用して、グラフデータに対して実行するカスタム関数を指定できます。この関数で使用されるデータは、次の 2 つのソースのいずれかから取得されます。

  • chd のデータ系列 - chd 内の指定した系列からデータが取得されます。
  • chfd パラメータ自体で宣言される値の範囲 - 任意のデータ範囲の開始値、停止値、ステップ値を宣言します。

いずれの場合も、出力を chd の既存のシリーズに割り当てる必要があります。このシリーズは関数出力によって上書きされます。グラフは、すべての関数が処理された後にのみレンダリングされます。したがって、同じデータ系統に出力する複数の関数を割り当てると、関数は指定された順序で実行されますが、最終的な関数の出力のみがグラフにプロットされます。関数を連結すると、1 つの関数が前の関数が出力した系列を入力として受け取ることができます。

色または chm マーカーを関数行に割り当てるには、色またはマーカーを関数の系列インデックスに割り当てます。マーカーは、関数によって操作された後のデータに従って配置されます。

構文

chfd=
  <output_series_index>,<function_data>,<function_string>
    |...|
  <output_series_index>,<function_data>,<function_string>
<output_series_index>
関数出力の書き込み先である、chd 内のデータ系列のゼロベースのインデックス。既存のデータはすべて、関数の出力によって完全に上書きされます。シリーズが関数の入力として使用されていない場合は、そのシリーズに単一のダミー値を割り当てることをおすすめします。
<function_data>
プロットする変数とデータ。定義した範囲のデータか、chd データ系列のデータを使用できます。複数の変数に対して ;(セミコロン)区切り文字を使用して、関数ごとに複数の変数を指定できます。1 つの関数に対して複数の変数を定義し、これらの変数のポイント数が異なる場合、関数は最初のエンドポイントに到達すると停止します。たとえば、関数で x=1 ~ 5 のステップ 1 と y=1 ~ 10 のステップ 1 の両方を定義した場合、この関数は 5 番目のポイントに到達すると終了します。
    <variable_name>,<input_series_index>
        
または
    <variable_name>,<start>,<end>,<step>
  • variable_name - 変数の任意の文字列名。これは function_string で定義された関数で使用します。
  • input_series_index - 入力データとして使用する chd データ系列のインデックス。
  • start - 範囲の開始値(数値)。
  • end - 範囲の数値の終了値。
  • step - start から end までのステップの数値。正でも負でも、ゼロにすることはできません。
例: x,0,100,1 は、x という変数に値 0、1、2、... 100 を宣言しています。x,0,100,1;r,0,3.1,.1 は、同じ x 変数と、値が 0、0.1、0.2、...、3.0、3.1 の r という名前の変数を宣言します。x,0 は、最初の chd シリーズのデータを使用する x という名前の変数を宣言します。これらの変数は function_string で使用されます。function_string で指定しない限り、グラフにはプロットされません。ステップが小さいほど、グラフは滑らかになります。
<function_string>
muParser の構文で記述された関数。この関数は、variable_data で指定された変数とデータに適用されます。このローカル関数セットで宣言された変数のみを参照でき、別のパイプ セットの chfd パラメータで参照することはできません。muParser 関数の概要(min、max sum、avg)はサポートされていません。重要: 関数では、+ ではなく %2B を使用してください。

 

説明

シンプルなサインの波。注意点:

  • chd=t:-1 - データは chfd パラメータで宣言されるため、グラフデータにはダミー変数を使用します。
  • chco=FF0000 - 最初の系列は赤色で表示されます。chd のデータは使用しませんが、プロットされた関数には、この系列に対応する色が使用されます。
  • chfd=0,x,0,11,0.1,sin(x)*50%2B50 - x という 1 つの変数を宣言します。値は 0 ~ 11 で、0.1 ずつ増えます。最初のシリーズに割り当てられます。つまり、最初のシリーズの色(FF0000)が得られます。x に適用される関数は sin(x) × 50 + 50 です。その関数で + をエンコードする必要があるので注意してください。

 

chfd で指定された正弦波
cht=lc
chd=t:-1
chco=FF0000
chfd=
  0,x,0,11,0.1,sin(x)*50%2B50
chxt=x,y
この行では、chd パラメータのデータを使用します。 chd データに対して実行する関数。
chd=t:5,10
chfd=0,x,0,x*4

関数行と非関数行が混在している。

系列の色パラメータ chco で色が指定されている点に注意してください。

関数出力上のマーカーの配置に着目してください。データポイントは startendstep から計算されるため、範囲が 0 ~ 11 のステップ 0.1、ポイント 0 は 0、ポイント 1 は 0.1 となり、値 110 までは値 11 になります。

1 つは chfd を使用するシリーズ、もう 1 つは chd を使用してデータを取得するシリーズです。
chd=t:
  -1
  15,45
chco=
  FF0000,000000
chfd=
  0,x,0,11,0.1,sin(x)*50%2B50
chm=
  c,00A5C6,0,110,10
  a,00A5C6,0,60,10

2 つのディメンションで関数を定義するには、lxy グラフを使用して 2 つのダミーシリーズを割り当て、それぞれに関数を割り当てます。

  • 0,x,0,10,0.1,sin(x)*50%2B50 - シリーズ 0(x 軸の値)には、0 ~ 10 の変数、ステップ 0.1、関数 sin(x)*50 + 50 が付いた x という変数があります。
  • 0,y,0,10,0.1,sin(y)*50%2B50 - シリーズ 0(Y 軸の値)には y という変数があり、値は 0 ~ 10、ステップ 0.1、関数 sin(x)*50 + 50 です。
円
cht=lxy
chd=t:-1|-1
chfd=
  0,x,0,10,0.1,sin(x)*50%2B50|
  1,y,0,10,0.1,cos(y)*50%2B50

chfd パラメータを使用すると、創造性を表現できます。

これらの画像をクリックして開いて、チャートの遊び場で遊んでみましょう。夢中になるはずです。



トップへ戻る