このページでは、URL でリクエストしたり、他のグラフの上にマーカーとして追加したりできる、さまざまなコールアウト、バブル、ピンなどのグラフィックを作成する方法について説明します。
目次
はじめに
Chart API を使用すると、テキストと画像を組み合わせて、興味を引くさまざまなコールアウト、ピン、バブルを作成できます。このようなアイテムは「ダイナミック アイコン」と呼ばれます。自立型のダイナミック アイコン画像を作成するか、chem
パラメータを使用してマーカータイプとしてグラフ上にダイナミック アイコンを配置します。このページでは、独立型の画像や別のグラフ上のマーカーとして、ダイナミック アイコンを作成する方法について説明します。インフォグラフィックの動的アイコンのリファレンス ページでは、利用可能なダイナミック マーカーのすべてのタイプについて説明しています。
ダイナミック アイコンを作成する構文は、独立型のアイコンにするか、別のグラフのダイナミック マーカーとして使用するかによって異なります。
独立型のアイコン
動的アイコン画像は、他のグラフをリクエストするのと同じ方法でリクエストできます。独立型の動的アイコンは、他のグラフとは異なるパラメータ セットをサポートしています。
パラメータ | 必須または任意 | 説明 |
---|---|---|
chst=<icon_string_constant> |
必須 | 作成するアイコンの種類を記述します。
|
chld=<icon_data> |
必須 | アイコンのサイズ、回転、テキスト、その他の必須データの記述に使用される特定のデータ。
|
cht |
未使用 | 独立型のダイナミック アイコングラフでは、cht パラメータを使用しません。 |
chs |
未使用 | 独立型のダイナミック アイコングラフでは、chs パラメータを使用しません。 |
chd |
未使用 | chld パラメータを使用して、独立型のダイナミック アイコンにデータを渡します。 |
例
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
ダイナミック マーカー
chem
パラメータを使用すると、さまざまなタイプのグラフにダイナミック アイコンをマーカーとして埋め込むことができます。詳しくは、chem
のドキュメントをご覧ください。
例
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
一般的なアイコン機能
ほとんどのアイコンには、テキスト文字列またはシャドウを関連付けることができます。
テキスト文字列
Chart API に渡される表示テキストはすべて、UTF-8 でエンコードしてから、URL でエンコードする必要があります。これは、URL セーフでない文字にのみ影響します(URL セーフな文字のほとんどは、a ~ z の英字の大文字と小文字、および短い句読点です)。たとえば、文字「è」は UTF-8 で URL エンコードされた値は「%C3%A8
」、中国語の文字の「駅」は「%E9%A7%85
」です。ほとんどのブラウザでは、エンコードされていない値を URL 文字列(例: 「駅」)で使用でき、バックグラウンドでエンコードされます。
ただし、グラフの URL を表示しているブラウザがこれを行わない場合もあります。そのため、通常は、テキスト文字列内の ASCII 以外の文字をすべて UTF-8 で URL エンコードすることをおすすめします。なお、これはふきだしやピンに表示されるテキストにのみ適用されます。URL 構文に含まれる &、| などの文字には適用されません。
chem
パラメータを使用して動的アイコン マーカーを指定する場合は、chem
のドキュメントに記載されているように、テキスト内の特定の文字もエスケープする必要があります。
シャドウ
多くのアイコンにシャドウを付けたり、アイコンそのものを使用せずに一部のアイコンにシャドウを描画したりすることもできます。
影付きアイコン
これらのアイコンの多くは、シャドウの有無にかかわらず描画できます。シャドーイングを利用するオプションがある場合は、アイコン名に _withshadow
で終わるバージョンと、その末尾がない別のバージョンがあります。シャドウが必要かどうかに応じて、いずれかの末尾のアイコンを指定できます。
中程度のテキストふきだしと、シャドウありとシャドウなしのピンの例を以下に示します。
chst=d_bubble_icon_text_big |
chst=d_bubble_icon_text_big_withshadow |
chst=d_map_pin_icon |
chst=d_map_pin_icon_withshadow |
自立型シャドウ
一部のアイコンタイプでは、シャドウ自体を描画できます。この方法は、グラフィック上で複数のシャドウが重なっているアイコンを使用していて、アイコンが近すぎて 1 つのアイコンの影が別のアイコンにぶつかるような場合に便利です。たとえば、以下に示す 2 つのシャドウバブルがあり、最初に Robert が描画され、次に Alice が描画されています。
アリスの影がロバートを部分的に覆っていることに注目してください。これを修正するには、まず Alice の影を描画してから、Robert のふきだしを描画してから、影のない Alice を描画します。照明とシャドウについては完全に現実的ではないかもしれませんが、あるバブルが別のバブルの影で隠れることは回避されます。
chem=
y;s=bubble_text_small_shadow;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice, no shadow
y;s=bubble_text_small_withshadow;d=bbtr,Robert,FF8,000;ds=0;dp=3.5;py=1 // Robert with shadow
y;s=bubble_text_small;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice shadow
すべてのマーカーは同じ Z オーダーの 1(py=1
)を指定しているため、リストされている順序で、グラフ要素(グラフの線)の上に描画されます。最初に Alice の影が描画され、その上に Robert のふきだし、その上に Alice のふきだしが描画されます。
シャドウのみを描画できるかどうかについては、特定のアイコンタイプのドキュメントをご覧ください。
コンテキスト アイコン
割り当てられたポイントに応じて、色、サイズ、積み重ねが異なるアイコンを指定できます。これらのアイコンタイプは、動的アイコン マーカー(chem
パラメータ)としてのみ使用でき、独立型のアイコンとしては使用できません。
これらのアイコンは、色、サイズ、積み重ね情報を指定するシリーズ以外のシリーズにレンダリングできます。つまり、chem
パラメータの ds
値はアイコンをレンダリングするシリーズを指定しますが、アイコンのサイズまたは色を決定する値は下記のパラメータで指定します。たとえば、アイコン データには非表示のデータ系列を使用し、アイコンは視認できる線またはバー上にレンダリングするのが良い方法の 1 つです。以下に例を挙げます。
元のシリーズにレンダリングされたアイコン | 参照元以外のシリーズでレンダリングされたアイコン | 非表示のシリーズを使用しているアイコン |
---|---|---|
chem=
|
chem=
|
chd=t1:
|
コンテキスト マーカーのタイプ
マーカー タイプ | chem 秒の値 |
例 |
---|---|---|
色のバリエーション | s=cm_color |
|
サイズのバリエーション | s=cm_size |
|
色とサイズのバリエーション | s=cm_color_size |
|
スタック バリエーション | s=cm_repeat |
|
積み重ねとカラー バリエーション | s=cm_repeat_color |
コンテキスト アイコンでは、オプションの配置文字列を使用して、データポイントに対するアイコンの配置とオフセットを指定できます。この文字列の構文は次のとおりです。
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- alignment
- ポイントに対するアイコンの配置を示す 2 文字。例として、
tl
(左上)、rb
(右下)などがあります。詳細なリストと説明については、chem
パラメータの alignment_string パラメータの説明をご覧ください。 - h_anchor_offset
- (省略可): アンカー ポイントの水平オフセット(ピクセル単位)。ゼロを含む 値の前には、+ または - を付ける必要があります。重要: + は %2B として URL エンコードする必要があります。
- v_anchor_offset
- (省略可): アンカー ポイントの垂直オフセット(ピクセル単位)。ゼロを含む値の前には、+ または - を付ける必要があります。重要: + は %2B として URL エンコードする必要があります。
chem
パラメータの of
コンポーネントを使用して、水平方向と垂直方向のオフセットを指定することもできます。of
コンポーネントと h_anchor_offset v_anchor_offset
の両方の値を指定すると、すべてのオフセットがアイコンに適用されます。
例:
hb-0-0 左右中央下部 オフセットなし |
lb-0-0 左下 オフセットなし |
rb-0-0 右下 オフセットなし |
ht-0-0 横長 オフセットなし |
hb-20-0 水平、中央、下 -20 水平 0 垂直 |
hb%2b20-0 水平方向、中央 - 下方向 水平方向 +20 垂直方向 0 |
hb-0%2b10 水平、中央、下部 0 水平 +10 垂直 |
hb-0-20 水平、中央、下 0 水平 -20 垂直 |
色のバリエーション(cm_color
)
コンテキストに基づくグラフ マーカーの色は、それが表すポイントに応じて変更できます。色範囲を指定する必要があります。データ値はその範囲内で対応する色にスケーリングされます。
構文
chem=y;s=cm_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<icon_size>,<outline_color>,<alignment>
- <icon_shape>
- 使用するアイコン。ページの最後にリストされている画像のいずれかを識別する ID 文字列を指定します。
- <color_data_series>
- アイコンの色を変更するために使用するデータ系列のインデックス(ゼロベース)。
- <low_color>
- 範囲内の低色の値。HTML の 3 桁または 6 桁の 16 進数色コード(# 記号なし)で指定します。これは、使用可能なデータ範囲内の最小値に関連付けられます。
- <middle_color>
- 範囲内の真ん中の色の値。3 桁または 6 桁の HTML 16 進数色コード(# 記号なし)。これは、使用可能なデータ範囲の中央値に関連付けられます。
- <high_color>
- 範囲内の高色の値。HTML の 3 桁または 6 桁の 16 進数色コード(# 記号なし)で指定します。これは、使用可能なデータ範囲内の最大値に関連付けられます。
- <icon_size>
- アイコンのサイズ(ピクセル単位)。サポートされる値は、12、16、24 です。
- <outline_color>
- アイコンの枠線の色。3 桁または 6 桁の HTML 16 進数色コード(# 記号なし)。
- <alignment>
- アイコンの配置とオフセットを説明する省略可能な文字列。
例
|
chem=y;s=cm_color; |
サイズのバリエーション(cm_size
)
選択したデータ系列に応じて、コンテキストに基づくグラフ マーカーのサイズのみを変更できます。
構文
chem=y;s=cm_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<fill_color>,<alignment>
- <icon_type>
- アイコンの形状。
maps_pin
、disk
、square
のいずれかの値を選択します。 - <サイズデータ系列size_data_series>
- アイコンのサイズを変えるために使用する、データ系列の 0 から始まるインデックス。
- <zero_value_sizezero_value_size>
- シリーズの最小データ値におけるアイコンの基本サイズ。
- <size_multiplier>
- サイズ スケーリング ファクタ。この値を各アイコンのデータ値と最小シリーズ値との差と乗算して、最終的なアイコンサイズを算出します。したがって、データ値が 0 のアイコンは、この調整因子の影響を受けません。
- <min_size>
- アイコンの最小サイズ(ピクセル単位)。
- <outline_color>
- アイコンの枠線の色。3 桁または 6 桁の HTML 16 進数色コード(# 記号なし)。
- <fill_colorfill_color>
- アイコンの塗りつぶしの色。3 桁または 6 桁の HTML 16 進数色コード(# 記号なし)で指定します。
- <alignment>
- アイコンの配置とオフセットを説明する省略可能な文字列。
例
基本的な例。値 0 のアイコンは、値 0 のサイズ(30 ピクセル)でレンダリングされます。サイズはデータとともに大きくなります。 | chd=t:0,10,20,30,40,50,60,70 |
この例では、アイコンのサイズデータを黄色の線から取得していますが、青い線上にレンダリングされています。
|
chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
色とサイズのバリエーション(cm_color_size
)
選択したデータ系列に応じて、コンテキストに基づくグラフ マーカーの色とサイズの両方を変更できます。
構文
chem=y;s=cm_color_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<alignment>
- <icon_type>
- アイコンの形状。
maps_pin
、disk
、square
のいずれかの値を選択します。 - <color_data_series>
- アイコンの色を変更するために使用するデータ系列のインデックス(ゼロベース)。
- <low_color>
- 範囲内の低色の値。HTML の 3 桁または 6 桁の 16 進数色コード(# 記号なし)で指定します。これは、使用可能なデータ範囲内の最小値に関連付けられます。
- <middle_color>
- 範囲内の真ん中の色の値。3 桁または 6 桁の HTML 16 進数色コード(# 記号なし)。これは、使用可能なデータ範囲の中央値に関連付けられます。
- <high_color>
- 範囲内の高色の値。HTML の 3 桁または 6 桁の 16 進数色コード(# 記号なし)で指定します。これは、使用可能なデータ範囲内の最大値に関連付けられます。
- <サイズデータ系列size_data_series>
- アイコンのサイズを変えるために使用する、データ系列の 0 から始まるインデックス。
- <zero_value_sizezero_value_size>
- シリーズの最小データ値におけるアイコンの基本サイズ。
- <size_multiplier>
- サイズ スケーリング ファクタ。この値を各アイコンのデータ値と最小シリーズ値との差と乗算して、最終的なアイコンサイズを算出します。したがって、データ値が 0 のアイコンは、この調整因子の影響を受けません。
- <min_size>
- アイコンの最小サイズ(ピクセル単位)。
- <outline_color>
- アイコンの枠線の色。3 桁または 6 桁の HTML 16 進数色コード(# 記号なし)。
- <alignment>
- アイコンの配置とオフセットを説明する省略可能な文字列。
例
この例では 2 行を使用しています。ピンは、レンダリングされるシリーズの色データを使用しますが、他のシリーズのサイズデータを使用します。
|
chd=s:0akAZtnkmi,nbMPJOKXXS |
併用パターン(cm_repeat
)
特定のポイントのデータ値に応じて、アイコンの積み重ねの高さを変更できます。
構文
chem=y;s=cm_repeat;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<fill_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- 使用するアイコン。ページの最後にリストされている画像のいずれかを識別する ID 文字列を指定します。
- <repeat_series_index>
- この時点で配置するアイコンの数を計算するために使用されるデータ系列のゼロベースのインデックス。
- <スケーリング係数scaling_factor>
- ソースデータ系列の値は 0 ~ 1 の値にスケーリングされ、この値を乗算して、このポイントに配置するマーカーの数を決定します。部分的な値は切り捨てられます。
- <stacking_directionstacking_direction>
- 積み重ね方向: 横は「h」(小文字)、縦は「V」(大文字)です。
- <icon_size>
- 各マーカーのサイズ(ピクセル単位)。サポートされる値は、12、16、24 です。
- <fill_colorfill_color>
- アイコンの塗りつぶしの色。3 桁または 6 桁の HTML 16 進数色コード(# 記号なし)で指定します。
- <outline_color>
- アイコンの枠線の色。3 桁または 6 桁の HTML 16 進数色コード(# 記号なし)。
- <spacing>
- スタック内の各マーカーの間に配置するスペースのサイズ(ピクセル単位)。
- <alignment>
- アイコンの配置とオフセットを説明する省略可能な文字列。
例
この例では、2 つ目のダミーデータ系列を使用します。これはグラフ上にレンダリングされるのではなく、グラフの下部からすべてのスタックを均等に配置するための手段として使用されます。
|
chd=s1:0akAZtnkmi,AAAAAAAAAA
|
積み重ねと色の違い(cm_repeat_color
)
特定のポイントのデータ値に従って、アイコン スタックの高さと色の両方を変更できます。
構文
chem=y;s=cm_repeat_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- 使用するアイコン。ページの最後にリストされている画像のいずれかを識別する ID 文字列を指定します。
- <repeat_series_index>
- この時点で配置するアイコンの数を計算するために使用されるデータ系列のゼロベースのインデックス。
- <スケーリング係数scaling_factor>
- ソースデータ系列の値は 0 ~ 1 の値にスケーリングされ、この値を乗算して、このポイントに配置するマーカーの数を決定します。部分的な値は切り捨てられます。
- <stacking_directionstacking_direction>
- 積み重ね方向: 横は「h」(小文字)、縦は「V」(大文字)です。
- <icon_size>
- 各マーカーのサイズ(ピクセル単位)。サポートされる値は、12、16、24 です。
- <color_data_series>
- アイコンの色を変更するために使用するデータ系列のインデックス(ゼロベース)。
- <low_color>
- 範囲内の低色の値。HTML の 3 桁または 6 桁の 16 進数色コード(# 記号なし)で指定します。これは、使用可能なデータ範囲内の最小値に関連付けられます。
- <middle_color>
- 範囲内の真ん中の色の値。3 桁または 6 桁の HTML 16 進数色コード(# 記号なし)。これは、使用可能なデータ範囲の中央値に関連付けられます。
- <high_color>
- 範囲内の高色の値。HTML の 3 桁または 6 桁の 16 進数色コード(# 記号なし)で指定します。これは、使用可能なデータ範囲内の最大値に関連付けられます。
- <outline_color>
- アイコンの枠線の色。3 桁または 6 桁の HTML 16 進数色コード(# 記号なし)。
- <spacing>
- スタック内の各マーカーの間に配置するスペースのサイズ(ピクセル単位)。
- <alignment>
- アイコンの配置とオフセットを説明する省略可能な文字列。
例
|
chem= |