動的アイコン

   スタンドアロンの画像と同じ動的アイコン マーカーです。
インフォグラフィックの動的アイコンのリファレンス ページでは、利用可能なダイナミック マーカーのすべてのタイプについて説明しています。

このページでは、URL でリクエストしたり、他のグラフの上にマーカーとして追加したりできる、さまざまなコールアウト、バブル、ピンなどのグラフィックを作成する方法について説明します。

目次

  1. はじめに
    1. 独立型のアイコン
    2. ダイナミック マーカー
  2. アイコンの一般的な機能
    1. テキスト文字列
    2. シャドウ
  3. コンテキスト アイコン

はじめに

Chart API を使用すると、テキストと画像を組み合わせて、興味を引くさまざまなコールアウト、ピン、バブルを作成できます。このようなアイテムは「ダイナミック アイコン」と呼ばれます。自立型のダイナミック アイコン画像を作成するか、chem パラメータを使用してマーカータイプとしてグラフ上にダイナミック アイコンを配置します。このページでは、独立型の画像や別のグラフ上のマーカーとして、ダイナミック アイコンを作成する方法について説明します。インフォグラフィックの動的アイコンのリファレンス ページでは、利用可能なダイナミック マーカーのすべてのタイプについて説明しています。

ダイナミック アイコンを作成する構文は、独立型のアイコンにするか、別のグラフのダイナミック マーカーとして使用するかによって異なります。

独立型のアイコン

動的アイコン画像は、他のグラフをリクエストするのと同じ方法でリクエストできます。独立型の動的アイコンは、他のグラフとは異なるパラメータ セットをサポートしています。

パラメータ 必須または任意 説明
chst=<icon_string_constant> 必須

作成するアイコンの種類を記述します。

  • icon_string_constant - 作成するアイコンのタイプを表す文字列定数です。アイコンの選択方法については、以下のアイコンの選択をご覧ください。
chld=<icon_data> 必須

アイコンのサイズ、回転、テキスト、その他の必須データの記述に使用される特定のデータ。

  • 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=
  y;s=cm_size;ds=0;...;
  d=maps_pin,0,10,50,10,8F8,000,hb
  • ds=0 - シリーズ 0(赤い線)でレンダリング
  • d=maps_pin,0,... - 系列 0 のデータ
chem=
  y;s=cm_size;ds=1;...;
  d=maps_pin,0,10,50,10,8F8,000,hb
  • ds=1 - シリーズ 1(青い線)でレンダリングします
  • d=maps_pin,0,..。- 系列 0 のデータ
chd=t1:
  10,20,30,5,10,60
  10,20,30,70,60,5
chem=
  y;s=cm_size;ds=0;dp=all;
  d=disk,1,5,20,5,FFFF10,000
  • t1: - 最初の系列が表示され、線データが使用されます。 これ以降のシリーズはすべて非表示になっています。
  • ds=0 - シリーズ 0 にレンダリングされたマーカー。
  • d=disk,1,... - ディスクデータは非表示のシリーズ 1 から取得されます。

コンテキスト マーカーのタイプ

マーカー タイプ 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>
アイコンの配置とオフセットを説明する省略可能な文字列

  • s=cm_color - カラー バリエーション アイコン
  • ds=0 - データ系列 0 でレンダリングします。
  • dp=all - すべてのポイントにアイコンを配置します。
  • d 値:
    • petrol - アイコンの識別子
    • 0 - データ系列 0 の色
    • 000,0FF,F55 - カラースケールの定義
    • 24 - アイコンのサイズ
    • 000 - 黒い枠線
    • hv - 水平方向と垂直方向の両方で、ポイントを中心にアイコンを中央に配置します。

chem=y;s=cm_color;
  ds=0;
  dp=all;
  d=petrol,0,000,0FF,F55,24,000,hv

トップへ戻る

 

 


サイズのバリエーション(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_pindisksquare のいずれかの値を選択します。
<サイズデータ系列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=y;s=cm_size;ds=0;dp=all;py=-1;d=maps_pin,0,30,100,10,8F8,000,hb

この例では、アイコンのサイズデータを黄色の線から取得していますが、青い線上にレンダリングされています。

  • chem=y - ダイナミック マーカー
  • s=cm_size - サイズの差異
  • ds=1 - データ系列 1(青い線)にレンダリング
  • dp=all - すべてのポイントにレンダリングされます。
  • d=
    • maps_pin - マップのピンアイコンを使用する
    • 0 - データ系列 0(黄色の線)に合わせてサイズを調整します。
    • 10 - 値 0 のピンサイズ
    • 90 - サイズの調整比
    • 10 - 最小サイズ
    • 8F8 - 塗りつぶしの色
    • 000 - 輪郭の色
    • hb - ピンの下部で、水平方向に中央揃えします。


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_pindisksquare のいずれかの値を選択します。
<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 - 最初の系列を使用して黄色の線を描画し、ピンの色を決定します。2 つ目のシリーズは青い線とピンのサイズに使用されます。
  • chem=y - ダイナミック アイコンをレンダリングします。
  • s=cm_color_size - 色とサイズのバリエーションのコンテキスト アイコンを使用します。
  • ds=1 - データ系列 1(青い線)上にアイテムをレンダリングします。
  • dp=all - すべてのポイントにアイコンを配置します。
  • d=
    • maps_pin - マップピン記号を使用します。
    • 1 - ピンの色にデータ系列 1 を使用します。
    • 000,0FF,F55 - 低、中、高の色。
    • 0 - ピンサイズにデータ系列 0 を使用します。
    • 10 - ピンは、値 0 で 10 ピクセル。
    • 90 - サイズ乗数 90。
    • 10 - 最小ピンサイズ: 10 ピクセル。
    • 000 - 黒い枠線の色。
    • hb - 各データポイントの下端に沿って、ピンを水平方向に中央揃えします。


chd=s:0akAZtnkmi,nbMPJOKXXS
chem=y;s=cm_color_size;ds=1;dp=all;d=maps_pin,1,000,0FF,F55,0,10,90,10,000,hb

トップへ戻る

 

 


併用パターン(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 - 最初のシリーズを使用して、直線をプロットし、スタックの高さを決定します。2 つ目は、各アイコン スタックの底部を 0 の値で指定して使用します。
  • chem=y - ダイナミック アイコンをレンダリングします。
  • s=cm_repeat - スタッキング バリエーションのコンテキスト アイコンを使用します。
  • ds=1 - データ系列 1 上にアイテムをレンダリングします。
  • dp=all - すべてのポイントにアイコンを配置します。
  • d=
    • d=petrol - ガソリン記号を使用します。
    • 0 - 繰り返し回数にはデータ系列 0 を使用します。
    • 9 - スケーリング ファクタ 6 を使用します。
    • V - 垂直方向に積み上げます。
    • 16 - 各マーカーの高さを 16 ピクセルにします。
    • F00 - アイコンの塗りつぶしの色。
    • 000 - アイコンの枠線の色。
    • 2 - スタック内の各アイコンの間に 2 ピクセル。
    • hb - スタックを中央に配置し、


chd=s1:0akAZtnkmi,AAAAAAAAAA
chem=
  y;s=cm_repeat;ds=1;dp=all;
  d=petrol,0,9,V,16,F00,000,2,hb

トップへ戻る

 


 

積み重ねと色の違い(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=y - ダイナミック アイコンをレンダリングします。
  • s=cm_repeat_color - スタッキングや色バリエーションのコンテキスト アイコンを使用します。
  • ds=0 - データ系列 0 上にアイテムをレンダリングします。
  • dp=all - すべてのポイントにアイコンを配置します。
  • d=
    • petrol - ガソリン記号を使用します。
    • 0 - 繰り返し回数にはデータ系列 0 を使用します。
    • 6 - スケーリング ファクタ 6 を使用します。
    • V - 垂直方向に積み上げます。
    • 12 - 各マーカーの高さを 12 ピクセルにします。
    • 0 - シリーズ 0 を使用して色を指定します。
    • F00,0F0,00F - 低、中、高の色の値。
    • 000 - アイコンの枠線の色。
    • 2 - スタック内の各アイコンの間に 2 ピクセル。
    • hv - 各データポイントの垂直方向と水平方向にスタックを配置します。

chem=
  y;s=cm_repeat_color;ds=0;dp=all;
  d=petrol,0,6,V,12,0,F00,0F0,00F,000,2,hv

トップへ戻る