動的アイコン

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

このページでは、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 を表示しているユーザーが、この機能に対応していないブラウザを使用している可能性もあるため、通常は UTF-8 を使用し、テキスト文字列内の ASCII 以外の文字はすべて URL エンコードすることをおすすめします。これは、バブルやピンで表示されるテキストにのみ適用されます。&、| などの URL 構文に含まれる文字には適用されません。

chem パラメータを使用して動的アイコン マーカーを指定する場合は、chem のドキュメントで説明されているように、テキスト内の特定の文字もエスケープする必要があります。

シャドウ

多くのアイコンにシャドウを追加できるほか、アイコン自体がなくても一部のアイコンにシャドウを描画することもできます。

影付きアイコン 影付きピン

これらのアイコンの多くは、シャドウの有無にかかわらず描画できます。シャドーイングを選択する場合、アイコン名には _withshadow で終わる 1 つのバージョンと、それを含まないバージョンがあります。シャドウを付けるかどうかに応じて、いずれかの末尾を持つアイコンを指定できます。

中程度のテキストのふきだしとピン(シャドウありとなし)の例を示します。

影なしのバブル
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>
範囲の低い色の値。3 桁または 6 桁の HTML 16 進数色コードで指定します(# 記号は付けません)。使用可能なデータ範囲の最も低い値に関連付けられます。
<middle_color>
範囲の中央の色の値を、3 桁または 6 桁の HTML 16 進数色で指定します(# 記号は付けません)。これは、使用可能なデータ範囲の中央値に関連付けられます。
<high_colorhigh_color>
範囲内の最も高い色の値を、3 桁または 6 桁の HTML 16 進数色で指定します(# 記号は付けません)。これは、使用可能なデータ範囲内の最も高い値に関連付けられます。
<icon_size>
アイコンのサイズ(ピクセル単位)。サポートされる値は、12、16、24 です。
<outline_color>
アイコンの枠線の色。3 桁または 6 桁の HTML 16 進数で指定します(# 記号なし)。
<alignment>
アイコンの配置とオフセットを記述するオプションの文字列

  • s=cm_color - カラー バリエーション アイコン
  • ds=0 - データ系列 0 でレンダリングします。
  • dp=all - すべてのポイントにアイコンを表示します。
  • d 値:
    • petrol - アイコン ID
    • 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>
アイコンのサイズを変えるために使用されるデータ系列のゼロベース インデックス。
<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>
範囲の低い色の値。3 桁または 6 桁の HTML 16 進数色コードで指定します(# 記号は付けません)。使用可能なデータ範囲の最も低い値に関連付けられます。
<middle_color>
範囲の中央の色の値を、3 桁または 6 桁の HTML 16 進数色で指定します(# 記号は付けません)。これは、使用可能なデータ範囲の中央値に関連付けられます。
<high_colorhigh_color>
範囲内の最も高い色の値を、3 桁または 6 桁の HTML 16 進数色で指定します(# 記号は付けません)。これは、使用可能なデータ範囲内の最も高い値に関連付けられます。
<size_data_series>
アイコンのサイズを変えるために使用されるデータ系列のゼロベース インデックス。
<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_indexrepeat_series_index>
この時点で配置するアイコン数の計算に使用されるデータ系列のゼロベースのインデックスです。
<scaling_factorscaling_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_indexrepeat_series_index>
この時点で配置するアイコン数の計算に使用されるデータ系列のゼロベースのインデックスです。
<scaling_factorscaling_factor>
ソースデータ シリーズの値は、0 ~ 1 の値にスケーリングされ、この値を掛けて、このポイントに配置するマーカーの数を決定します。値の一部は切り捨てられます。
<stacking_directionstacking_direction>
積み上げの方向: 横方向の場合は「h」(小文字)、縦の場合は「V」(大文字)を指定します。
<icon_size>
各マーカーのサイズ(ピクセル単位)。サポートされる値は、12、16、24 です。
<color_data_series>
アイコンの色を変えるために使用されるデータ系列のゼロベース インデックス。
<low_color>
範囲の低い色の値。3 桁または 6 桁の HTML 16 進数色コードで指定します(# 記号は付けません)。使用可能なデータ範囲の最も低い値に関連付けられます。
<middle_color>
範囲の中央の色の値を、3 桁または 6 桁の HTML 16 進数色で指定します(# 記号は付けません)。これは、使用可能なデータ範囲の中央値に関連付けられます。
<high_colorhigh_color>
範囲内の最も高い色の値を、3 桁または 6 桁の HTML 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

トップへ戻る