マップチャート

このページでは、Charts API を使ってカラーマップを作成する方法について説明します。このグラフは改良された新しいバージョンで、以前のマップグラフ（cht=t）よりも大きい地図と多くの機能をサポートしています。

目次

グラフ固有の機能

  1. 概要
  2. サポートされているパラメータ
  3. ズームと中央揃え

標準機能

  1. グラフのタイトル（chtt、chts）
  2. グラフの色（chco）
  3. グラフのマージン（chma）
  4. 背景の塗りつぶし
    1. 塗りつぶし（chf）
  5. グラフの凡例（chdl, Chdlp）
  6. シェイプ マーカー（chm）
  7. テキスト マーカーとデータ マーカー（chm）

概要

さまざまな国や州をカスタムカラーでハイライト表示した地図を作成できます。地図を適切なレベルにズームして、選択した国を適切に表示したり、緯度と経度の値を使用してカスタムレベルにズームインまたはズームアウトしたりできます。

サポートされているパラメータ

地図グラフでは、次のパラメータがサポートされています。

パラメータ 必須または任意 説明
cht=map<opt_zoom_and_center> 必須

地図グラフを指定します。

opt_zoom_and_center - 指定した領域をズームしたり、中央に表示したりできるオプションの文字列です。詳細を表示
chs 必須 地図のサイズ。地図の最大サイズは、幅 600 ピクセル、高さ 600 ピクセル、または合計 300,000 ピクセルです。
chd=
 <first_country_value>,
 ...,
 <last_country_value>		 任意 使用する場合、データ値は、chco で指定されたカラー グラデーションに沿って、対応する国の色を示します。
chld=
 <country_or_region_codes>|...|		 必須

国または州をパイプで区切ったリスト。chco で指定された色でハイライト表示されます。カスタムのズームや中央揃えを指定しない限り、指定したすべての国が含まれるように地図が自動的にズームされます。コードは大文字にする必要があります。これらのコードは ISO 3166-1-alpha-2 コードで、大文字 2 文字で、その後にダッシュ 1 文字と、地域や都市を表す 2 つ目の ID が続きます。例: GB（英国）、GB-LND（ロンドン）、US-NJ（米国ニュージャージー州）

chco

  • chd を使用しない場合:
    chco=
     <unselected_land_color>|
     <first_region_color>|
       ...|
     <last_region_color>
  • chd が使用されている場合:
    chco=
     <unselected_land_color>,
     <color_range_start>,
       ...,
     <color_range_end>
 任意

グラフの色。この文字列の形式は、chd を使用するかどうかによって異なります。どちらの構文でも、<unselected_land_color> は chld で指定されていない地域の色です。区切り線は構文によって異なることに注意してください（1 つはカンマ、もう 1 つはパイプ）。使用しない場合、領域は枠線で囲まれますが、色は付きません。

  • chd 中古品 - 2 番目以降の色は色範囲を表します。 chld では、国ごとに 1 つの chd 値を指定する必要があります。対応する国は、<first_region_color>（データ範囲の最小値）から <last_region_color>（データ範囲の最大値）の範囲で色分けされます。下の表の例をご覧ください。
  • chd 未使用 - 2 番目以降の色は、リストされている順序で chld の対応する領域に適用されます。国の数が色の数より多い場合、リスト内で余分な国には最後の色が適用されます。
chtt, chts 任意 グラフのタイトルとスタイル
chm 任意 グラフ マーカー
chma 任意 グラフの余白
chf=bg... 任意 単色塗りつぶし（背景のみ）
chdl 任意 グラフの凡例

 

例

説明 例

この例では

  • cht=map:fixed=-60,0,80,-35 - グラフのズーム領域は、緯度 -60 ～緯度 80、経度 0 ～経度 -35
  • chld=CA-BC|CN|IT|GR|US-UT - 混雑しているリージョンは、ブリティッシュ コロンビア、中国、イタリア、グリーズ、ユタです。
  • chm - フラグのグラフマーカー。
  • chma=0,110,0,0 - 凡例にぴったり収まるように、右側の枠線を 110 ピクセルに増やしました。
  • chtt=Last+Five+Olympic+Hosts - グラフのタイトル。スペースであることを示すのに「+」が付いています。

オリンピック開催国 5 か国の地図に旗のマーカーがある。
cht=map:fixed=-60,0,80,-35
chs=600x350
chld=CA-BC|CN|IT|GR|US-UT
chdl=Vancouver|Beijing|Torino|Athens|Salt+Lake+City
chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274
chtt=Last+Five+Olympic+Hosts
chm=f2010+Winter,000000,0,0,10
f2008+Summer,000000,0,1,10
f2008+Winter,000000,0,2,10,1,:-5:10
f2004+Summer,000000,0,3,10
f2004+Summer,000000,0,4,10
chma=0,110,0,0

フランスを示す地図。2 つの地域がハイライト表示されています。

  • chld=FR-D|FR-B|FR - ブルゴーニュ（東部）、アキテーヌ（南西）、フランスの 3 つのリージョンが指定されています。
  • chco=676767|FF4444|44FF44|4444FF - このマップでは chd パラメータは指定されていないため、最初の色より後の色の値は対応する国の指定に使用されます。ブルゴーニュは赤、アキテーヌは緑、フランスは青です。後の色で以前の色がマスクされていないことがわかります。
 フランスの地図。2 つの州がハイライト表示されている。
chld=FR-D|FR-B|FR
chco=676767|FF4444|44FF44|4444FF

この地図では、カラー グラデーションを使用しています。

  • chd=t:0,50,100 - chd パラメータはカラー グラデーションを示します。ここではテキスト エンコードが指定されています（範囲は 0 ～ 100）。
  • chco=CCCCCC,FF0000,000000 - 背景色はライトグレー（CCCCCC）で、色範囲は赤（FF0000）～黒（000000）です。表示されている中央の国は、そのグラデーションの中間色です。
 カラー グラデーションを示す地図。
chd=t:0,50,100
chco=CCCCCC,FF0000,000000
指定されたグラフサイズ内で地図を切り抜くことができます。これは、指定されたグラフサイズ内に収まるようにマップが歪んでいないものの、chld で指定した領域にマップが限定されるためです。そのため、グラフの境界内で切り抜かれた領域が発生しないようにするには、地図サイズを手動で調整する必要があります。
長い国の正方形の地図

cht=map
chs=300x300
chld=GB

イギリスは自然に細長く細長いため、正方形の地図を指定すると右側に切り抜かれた領域が含まれます。

 長い国の正方形の地図

cht=map
chs=180x300
chld=GB

グラフの幅を調整して、余分な部分が切り取られます。地図の高さを下げて修正する必要がある下部のトリミングが残ることに注意してください。

 長い国の正方形の地図

cht=map
chs=180x300
chld=GB

フランスは形状が規則的なため、正方形の地図にもより自然に収まります。

トップへ戻る

ズームと中央揃え

デフォルトでは、グラフは選択した領域が中央に配置されるようにズームおよび中央に配置され、定義された地図サイズ内で可能な限り正確にレンダリングされた領域に収まります。ただし、グラフのセンタリング レベルとズームレベルは、次の 2 つの方法でカスタマイズできます。

ピクセル

ピクセルサイズで枠線を調整するには、次の形式を使用します。

cht=map:auto=<left_border>,<right_border>,<top_border>,<bottom_border>

各枠線サイズは、自動的に計算されるズームレベルを超えて表示する追加の枠線（ピクセル単位）です。

ズームアウト（正の値）のみ可能です。ピクセルズームを使用して、デフォルトのズームレベルよりズームイン（負の値）することはできません。

例:

これらの例はすべて、ロンドン（

ズームしない（デフォルト） 各辺を 30 ピクセル縮小 縮小し、右に縮小

下部に余分な空のマップがあります。
cht=map

 下に余計な地図が表示されています。
cht=map:auto=30,30,30,30		 ズームエリアを再フレームしました。
cht=map:auto=50,0,80,0

 

緯度と経度

次の構文を使用して、レンダリングされた地図の正確な上、下、左、右の境界を緯度と経度で指定できます。

cht=map:fixed=<bottom_border_lat>,<left_border_long>,<top_border_lat>,<right_border_long>

ここで、<bottom_border_lat> と <top_border_lat> には下の境界線と上の境界線の緯度を指定し、<left_border_long> と <right_border_long> には左右の境界線の経度を指定します。

注: メルカトル図法の歪み（基本的には曲線マップを平面の画像に投影する）のため、縦長の細長いストリップに焦点を合わせると、マップのサイズに予期しない違いが生じることがあります。

例:

次の例は、経度 0.1°、緯度 51.5° のロンドン（青色でハイライト表示）を示しています。地図は指定された英国のみを表示し、指定されたグラフを歪みなく塗りつぶそうとしているため、地図が切り抜かれています。

中央揃え 緯度のずれ +10* すべての値を減らしてズームしました

cht=map:fixed=40,-10,60,10


cht=map:fixed=50,-10,70,10
cht=map:fixed=48,-3,54,3

中央の画像は、同じ角度だけ上に移動したものの、最初の画像よりもサイズが少し小さいことに注意してください。これは、3D の球体を 2D 画像に投影しているためです。2 つ目のグラフの幅を 1 つ目のグラフと同じサイズにするには、そのグラフの幅を広げる必要があります。

トップへ戻る

標準の機能

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

グラフのタイトル 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 ポイントのタイトルが付いたグラフ。

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

トップへ戻る

グラフのマージン 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% の透明度です）。表セルの背景がグラフ全体に表示されます。

青色の点と透明度 50% の散布図。

chf=a,s,00000080

トップへ戻る

グラフの凡例のテキストとスタイル 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

大きな円で囲まれた 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

トップへ戻る

シェイプ マーカー chm [棒グラフ、折れ線、レーダー、散布図]

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

パイプ文字（|）を使用して chm パラメータを区切ることで、図形マーカーを他の chm パラメータと組み合わせることができます。

構文

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

散布図では、シェイプ マーカーの動作が若干異なります。詳しくは、そちらのドキュメントをご覧ください。

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_who_points> に x:y 形式を使用します。
<marker_type>
使用するマーカーのタイプ。次のいずれかのタイプを指定します。
  • a - 矢印
  • c - クロス
  • C - 長方形。長方形マーカーの場合、データ シリーズが 2 つ以上必要です。シリーズ 0 は下端、シリーズ 1 は上端を表します。<size> には長方形の幅をピクセル単位で指定します。
  • d - ひし形
  • E - エラーバー マーカー（） このマーカーを作成するには、2 つのデータ系列を作成します。1 つ目の値は最下位の値、2 つ目の系列内の対応する点は上部の値です。また、拡張された <size> 構文である line_thickness[:top_and_bottom_width] も公開されています。ここで、top_and_bottom_width は任意です。以下の例をご覧ください。
  • h - 指定した高さでのグラフの水平線。 （<opt_which_points> パラメータの有効な形式は、opt_which_points のみです。）
  • H - 指定されたデータマーカーを通る水平線。これにより、線の長さを正確に指定できる拡張 <size> 構文（line_thickness[:length]）がサポートされます。:length は任意で、デフォルトはグラフ領域の幅全体になります。
  • o - 円
  • s - 正方形
  • v - X 軸からデータポイントまでの垂直線
  • V - 長さを調整できる垂直線。これにより、拡張された <size> 値の構文（line_thickness[:length]）がサポートされます。:length は任意で、デフォルトはグラフ領域全体の高さです。 マーカーはデータポイントが中央に配置されます。
  • x - X
<color>
: この系列のマーカーの色（RRGGBB の 16 進形式）。
<series_indexseries_index>
: マーカーを描画するデータ系列のゼロから始まるインデックス。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 - start から end までのインデックス値（両端を含む）の範囲内の n 番目のデータポイントごとにマーカーを描画します。すべてのパラメータは省略可能です（指定されていない可能性があるため、3::1 は 4 番目の要素から最後のステップ 1 まで）。このパラメータを完全に省略した場合、デフォルトの first:last:1 になります。すべての値には浮動小数点数を使用できます。start と end には負の値を指定して、最後の値から逆方向にカウントできます。start と end の両方を負の値にする場合は、昇順で指定します（例: -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>
: マーカーのサイズ（ピクセル単位）。多くの場合、このパラメータには単一の数値を指定します。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 - 緑色のひし形、1 つ目の系列、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 - 青い正方形、1 つ目のシリーズ、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 ピクセル。
 マーカー付きの折れ線グラフ
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 つのデータ系列に円を使用する例を次に示します。

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

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

次の折れ線グラフでは、1 秒ごとに 1 つのデータポイントにマーカーが配置されています（-2 は 1 つおきを意味します）。

 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 ピクセル、長さ 50 ピクセル、データポイント 2 を中心とする水平線。
  • V,3399CC,0,8,3:50 - 青、幅 3 ピクセル、長さ 50 ピクセル、データポイント 8 を中央とする垂直線。
 title="cht=lc&chd=s:2gounjqLaCf,jqLaCf2goun&chco=008000,00008033&chls=2.0,4.0,1.0&chs=250x150&chm=H,990066,1,2,5:50
chm=
  E,000000,0,6,1:20|
  H,990066,1,2,5:50|
  V,3399CC,0,8,3:50

トップへ戻る

テキスト マーカーとデータ値マーカーchm [棒グラフ、折れ線、レーダー、散布図]

グラフ上の特定のポイントに、カスタム テキストや書式付きのデータを使用してラベルを付けることができます。

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

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

構文

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

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>
<marker_type>
使用するマーカーのタイプ。以下のタイプから選択できます。
  • f<text> - テキストを含むフラグ。文字「f」に続けて URL エンコードされたカスタム テキストを指定します。テキスト マーカー内でカンマをエスケープするには、カンマの前に \ 記号を付けます。例: fHello\,+World!
  • t<text> - 単純なテキスト マーカーです。文字「t」の後にカスタム URL エンコード テキストを指定します。テキスト マーカー内でカンマをエスケープするには、カンマの前に \ 記号を付けます。例: tHello\,+World!
  • A<text> - アノテーション マーカーです。これはフラグマーカーに似ていますが、マーカーは重複しないように位置を調整します。<opt_which_points> に使用できるのは、系列内のポイントのインデックスを示す opt_which_points のみです。
  • 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 - グループ セパレータを表示します。デフォルトは no です。
      • x または y - 指定された x 座標または y 座標のデータを表示します。x データの意味はグラフの種類によって異なります。グラフを試してその意味を判断してください。デフォルトは「y」です。
    • <following_text> - 各値の後に表示するテキスト。
<color>
: このセットのマーカーの色（RRGGBB の 16 進形式）。
<series_indexseries_index>
: マーカーを描画するデータ系列のゼロから始まるインデックス。積み上げ棒グラフで、マーカーの種類が N（データポイント値）の場合、-1 を指定して、棒の積み重ねごとに合計値のマーカーを作成できます。以下に例を示します。
<opt_which_points>
（省略可）: マーカーを描画するポイント。デフォルトはすべてのマーカーです。次のいずれかの値を使用します。
  • n.d - マーカーを描画するデータポイント。n.d は、シリーズ内のゼロから始まるインデックスです。整数以外の値を指定した場合、小数点以下は計算された中間点を示します。たとえば、3.5 はポイント 3 とポイント 4 の中間点を意味します。
  • -1 - すべてのデータポイントにマーカーを描画します。このパラメータを空のままにして、すべてのデータポイントに描画することもできます。
  • -n - n 番目のデータポイントごとにマーカーを描画します。
  • start:end:n - start から end までのインデックス値（両端を含む）の範囲内の n 番目のデータポイントごとにマーカーを描画します。すべてのパラメータは省略可能です（指定されていない可能性があるため、3::1 は 4 番目の要素から最後のステップ 1 まで）。このパラメータを完全に省略した場合、デフォルトの first:last:1 になります。すべての値には浮動小数点数を使用できます。start と end には負の値を指定して、最後の値から逆方向にカウントできます。start と end の両方が負の値の場合は、値を昇順で指定する必要があります（例: -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,,b、N,000000,0,1,10,,lv、N,000000,0,1,10,,r::10）。
horizontal_and_vertical_justification
マーカーのアンカー ポイント。これは両端揃えとは反対に動作するため、左のアンカーなら実際にはデータポイントの右にマーカーが配置されます。次のリストから、水平方向または垂直方向、あるいはその両方の両端揃えを選択できます。
  • 横置き: 「l」、「h」、「r」 - 左、中央、右に固定します。デフォルトは「l」です。
  • 垂直方向の配置: 'b'、'v'、't' - 垂直方向に、下部、中央、上部に固定されます。デフォルトは「b」です。
  • 棒を相対的に配置する [棒グラフのみ]: 's'、'c'、'e' - 棒の底部、中央、上部。積み上げグラフの場合、これは棒全体ではなく、各系列の棒のセクションに対して相対的に算出されます。指定された系列インデックスが -1（スタック合計）の場合、棒全体に対する値です。「be」や「vs」など、縦向きプレースメントの値と組み合わせることができます。 デフォルト値は「e」です。
horizontal_offset
このマーカーの水平オフセット（ピクセル単位）。デフォルトは 0 です。
vertical_offset
このマーカーの垂直オフセット（ピクセル単位）。棒グラフ以外のデフォルト: 15、棒グラフのデフォルト: 2。

説明 例

棒グラフの値のラベルの例を次に示します。

1 つ目のグラフ（N*p0*）では、データ値マーカーを指定しています。すべての値について、小数点以下 0 桁に四捨五入された黒色で、11 ポイントのテキストを含む値が表示されます。データ値はすべて 0.0 ～ 1.0 の間になります。パーセンテージ形式では、小数点以下 2 桁が上に移動します。

2 つ目のグラフ（N*cEUR1*）では、同じ値がユーロ値（小数点以下 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 pt の青色のテキストラベルと 15 pt の赤色のテキストのフラグが緑色の点線のデータポイント上に描画された折れ線グラフ。
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
もう一つのアノテーション マーカーの例は、スイスの都市の高度を示しています。

トップへ戻る