このページでは、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」でエンコードされた値 - は「quot;è"」です。%C3%A8" であり、中国語の「Stat」は "%E9%A7%85" です。ほとんどのブラウザでは、URL 文字列ではエンコードされていない値を使用できます（例: 「stations」など）。ただし、グラフの 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 |
自立型シャドウ 
一部のアイコンタイプでは、シャドウ自体を描画できます。画像に重なっている複数のシャドウ アイコンを使用していて、それらがアイコンの近くにある別のアイコンに重なっている場合は、このようにすることをおすすめします。たとえば、次の 2 つのシャドーバブルは、ロバートが先に描画し、次にアリスが描画しています。
アリスの影がロバートに部分的に覆われていることに注意してください。これを修正するには、まずアリス シャドウを描画し、次にロバート バブルを描画してから、アリス シャドウなしで描画します。ライティングとシャドウについては完全に現実的とは言えないかもしれませんが、あるバブルが別のシャドウの影に隠れてしまうことがありません。
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 はグラフの要素（グラフの線）の上にリストされた順序で描画されます。まずアリス シャドウが描画され、その上にロバート バブルが表示され、最後にアリス バブルが描画されます。
シャドウの描画ができるかどうかについては、各アイコンタイプのドキュメントをご覧ください。
アイコンの種類
| タイプ | 例 |
|---|---|
| バブル - テキストのふきだしのサイズを大きく、または小さくします。アイコンの有無は問いません。 | |
| ピン - ピンのタイプには、プレーン、スター、または傾きがあり、アイコン、1 文字、または長いテキスト文字列を使用できます。 | |
| テキストと省略可能なタイトルを含む楽しいスタイルメモ | |
| タイトル、テキスト、天気アイコン付きの天気予報メモ | |
| 複数行の枠線付きテキスト ブロック、アイコンなし | |
| アイコン付きの 1 行区切りのテキストブロック | |
| コンテキスト アイコン |
バブル
バブルでは、サイズの大小を問わず、アイコンの有無、1 行または複数行のテキストで、さまざまな組み合わせの機能を使用できます。次の表に、バブルの種類とそれぞれの構文を示します。各パラメータ値の説明は、表の下に表示されます。
備考
- すべてのバブルは、入力するテキストの幅と高さに合わせてサイズ変更されます。
- バブルを自立型ダイナミック アイコンとして使用する場合は、
chstバブル定数を使用します。バブルを埋め込み動的アイコン マーカーとして使用する場合は、chemバブル定数を使用します。 - バブル定数は、
_withshadowで終わるバリエーションをサポートしています。_withshadowのバリエーションを使用すると、バブルの下にシャドウが追加されます。 - バブルを埋め込み型動的アイコン マーカーとして使用する場合、埋め込み型動的アイコン マーカーのドキュメントで説明されているように、
chld文字列の構文はすべて同じです（区切り文字は , で置き換えられます）。
| Text | アイコン | chst（自立型）と chem（マーカー）値 |
chld 構文 |
シャドウのみ | 例 |
|---|---|---|---|---|---|
| 単一行 | x |
|
chld= |
chst= |
chst=d_bubble_text_small |
| 単一行 | Yes |
|
chld= |
chst= |
chst=d_bubble_icon_text_small |
| 単一行 | Yes |
|
chld= |
chst= |
chst=d_bubble_icon_text_big |
| 複数行 | x |
|
chld= |
chst= |
chst=d_bubble_texts_big |
| 複数行 | Yes |
|
chld= |
chst= |
chst=d_bubble_icon_texts_big |
構文
- <icon_string>
- このドキュメントの最後に記載されているアイコンのいずれかを表す文字列。
- <フレームスタイル>
- テールの方向。以下のテール方向の定数を選択します。
bb- バルーン フレーム、左下のテール
bbtl- バルーン フレーム、左上にテール
bbtr- バルーン フレーム、右上にテール
bbbr- バルーン フレーム、右下端
bbT- バルーン フレーム、テールなし
edge_bl- エッジフレーム、下端がテール、左端はテール
edge_bc- エッジフレーム、下端がテール、中央に配置
edge_br- エッジフレーム、テールの下端、右端
edge_tl- エッジフレーム、上端がテール、左端はテール
edge_tc- エッジフレーム、上端がテール、中央に配置
edge_tr- エッジフレーム、上端のテール、右端
edge_lt- エッジフレーム、左端にテール、上端
edge_lc- エッジフレーム、左端にテール、中央
edge_lb- エッジフレーム、左端のテール、下端
edge_rt- エッジフレーム、右端のテール、上端
edge_rc- エッジフレーム、右端のテール、中央
edge_rb- エッジフレーム、右端のテール、下端
- <fill_color>
- バブルの塗りつぶし色。6 桁の HTML 16 進数色で指定します。
- <text_color>
- テキストの色。6 桁の HTML 16 進数色で表示されます。
- <テキスト>
- 1 行のバブルを表す 1 行のバブルテキスト。スペースは + 記号でなければなりません。
- <text_line_1>|...|<text_line_n>
- 複数行のテキストバブルで、1 行以上のテキストバブル。各行は | 記号で区切ります。最初の行はさらに大きく、太字で表示されます。 スペースは + に置き換える必要があります。
シャドウのみ
バブルの場合は、上の表に示す構文を使用して自立型シャドウを描画することもできます。例:
chst= |
chst= |
chst= |
chst= |
chst= |
ピン
アイコンや短いテキスト文字列を使用して、さまざまなピンを作成できます。使用可能なピンのタイプは次のとおりです。
| ピンのタイプ | バブル定数 | 例 |
|---|---|---|
| 単一の文字またはアイコンが表示されているシンプルなピン |
|
|
| 単一の文字またはアイコンが表示されている、斜面 / スター付きのピン |
|
|
| スケーラブル、回転可能、複数行のピン | chst=d_map_spin |
一文字またはアイコン付きのプレーンなピン
直立した小さなピンで、小さなアイコンか 1 つの文字のどちらかを収めることができます。
文字構文
chst=d_map_pin_letter[_withshadow] chld=<character>|<fill_color>|<text_color>
アイコン構文
chst=d_map_pin_icon[_withshadow] chld=<icon_string>|<fill_color>
- <文字>
- [テキストピンのみ] 1 つのテキスト文字。
- <icon_string>
- （アイコンピンのみ] このドキュメントの最後に記載されているアイコンのいずれかを指定する文字列。
- <fill_color>
- バブルの塗りつぶし色。6 桁の HTML 16 進数色で指定します。
- <text_color>
- [テキストピンのみ] テキストの色。6 桁の HTML 16 進数色で指定します。
シャドウのみ
このピンタイプにのみシャドウを描画するには、次の構文を使用します。
chst=d_map_pin_shadow
chld パラメータは、シャドウの場合のみ必要です。
例
chst=d_map_pin_letter_withshadow |
chst=d_map_pin_letter |
chst=d_map_pin_icon |
chst=d_map_pin_shadow |
斜体またはスター付きのピン（1 文字の文字またはアイコン）
左または右に傾けるかスターに重ねることのできる小さいピンです。 ピンの内容は 1 文字か小さなアイコンのいずれかにします。
文字構文
chst=d_map_xpin_letter[_withshadow] chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>
アイコン構文
chst=d_map_xpin_icon[_withshadow] chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>
- <pin_style>
- ピンのスタイル。次のいずれかの定数を選択します。
pinpin_starpin_sleftpin_sright
- <icon_string>
- [アイコンピン]: このドキュメントの最後に記載されているアイコンのいずれかを表す文字列。
- <文字>
- [テキストピン] 単一のテキスト文字。
- <fill_color>
- バブルの塗りつぶし色。6 桁の HTML 16 進数色で指定します。
- <text_color>
- [テキストピン] テキストの色（6 桁の HTML 16 進数色）。
- <star_fill_color>
- [スターピン] スターの塗りつぶしの色。6 桁の HTML 16 進数色で表示されます。
シャドウのみ
このピンタイプにのみシャドウを描画するには、次の構文を使用します。
chst=d_map_xpin_shadow chld=<pin_style>
例
chst=d_map_xpin_letter |
chst=d_map_xpin_letter |
chst=d_map_xpin_icon |
chst=d_map_xpin_shadow |
拡大と回転を指定したテキストを固定する 
これは、長いテキスト文字列を含めるように手動でスケーリングできるピンです。 ピンを回転させてカスタムサイズを指定したり、フォントサイズと色を調整したりすることもできます。
構文
chst=d_map_spin chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>
- <スケール係数>
- ピンサイズを指定するスケーリング ファクタ。正の浮動小数点数です。0.5 は、スケーリングされていないピンのサイズです。0.25 はそのサイズの半分、1 はそのサイズの 2 倍というようになります。
- <rotation_deg>
- ピンの回転（度単位）。正と負の値を使用できます。垂直ピンには 0 を指定します。
- <fill_color>
- バブルの塗りつぶし色。6 桁の HTML 16 進数色で指定します。
- <font_size>
- テキストのフォントサイズ（ピクセル単位）
- <font_style>
- 通常のテキストの場合は '_'（アンダースコア）、太字テキストの場合は 'b' です。
- <text_line_1>...<text_line_n>
- 1 行以上のテキスト（| 文字で区切る）
例
chst=d_map_spin |
chst=d_map_spin |
chst=d_map_spin |
スタイルのスタイルに関するメモ
付箋や考えのふきだしなど、目新しいテンプレートでさまざまなテキストメモを作成できます。必要に応じて、メモにタイトル行を含めることができます。
これらのメモには固定サイズがあり、テキストのサイズに合わせて拡大または縮小されません。
構文
chst=d_fnote_title OR chst=d_fnote chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>
- チェスト
- タイトルを含むメモの場合は
d_fnote_titleを指定し、タイトルなしのメモの場合はd_fnoteを指定します。タイトル付きのメモでは、テキストの最初の行がタイトル（より大きく、太字）の形式になります。 - <メモの種類>
- メモの形状を説明する文字列。次の表のメモの種類の文字列のいずれかを選択します。
- <メモのサイズ>
- 大きいメモには 1 を、小さなメモには 2 を使用します。テンプレートのサイズは固定されています。テキストに合わせてテンプレートを拡大したり縮小したりしないでください。両方のサイズを試して、テキストを適切に保持するサイズを確認します。
- <text_color>
- テキストの色。6 桁の 16 進数色で表されます。アルファ値は使用できません。
- <text_alignment>
- ヘッダーを含むすべてのテキストの配置。次のいずれかの値を選択します。
- l - （'L'）左揃え
- h - 中央揃え
- r - 右揃え
- <text_line_1>| ...|<text_line_n>
- メモのテキスト。改行は | 文字で指定します。
chst=d_fnote_titleの場合、テキストの最初の行はタイトルとしてフォーマットされます。
メモの種類のテンプレート
メモ テンプレートでサポートされているテンプレートは次のとおりです。それぞれの note_type 文字列がテンプレートの下に表示されます。
注: テキスト文字列では大文字と小文字が区別されます。
arrow_d |
balloon |
pinned_c |
sticky_y |
taped_y |
thought |
例
| 説明 | 例 |
|---|---|
「chst=d_fnote_title」というタイトルのメモ。テキストの最初の行がタイトルとして使用されます。サイズの大きいメモです（1）。 |
chst=d_fnote_title |
タイトルなしのメモ: chst=d_fnote.テキストは中央に配置されます。 |
chst=d_fnote |
以前のジョーク向けのテンプレートです。 |
|
天気予報に関する注意事項
天気インジケーター アイコンでメモを作成できます。面白いスタイルノートと同様のレイアウトですが、テキストの色は常に黒で、テキストは常に左揃えになります。テキストは 1 ～ 3 行しか持てません。
これらのメモには固定サイズがあり、テキストのサイズに合わせて拡大または縮小されません。
構文
chst=d_weather chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>
- チェスト
d_weatherは気象情報を示します。- <メモの種類>
- このメモに使用するテンプレート。上記のファンスタイルのメモリストにリストされているメモ文字列のいずれかを使用します。
- <天気情報>
- 次の表の天気アイコン文字列のいずれかです。メモには 1 つの気象アイコンを含めることができます。
- <title>|<line_2>|<line_3>
- タイトルと、最大 2 行のテキスト（これらの追加のテキスト行はオプションです）。タイトルがより大きく、太字になっている。
天気アイコン
サポートされている天気アイコンのリストを以下に示します。各アイコンの weather_icon 文字列を示しています。
注: テキスト文字列では大文字と小文字が区別されます。
clear-night-moon |
cloudy-heavy |
cloudy-sunny |
cloudy |
rain |
rainy-sunny |
snow |
snowflake |
snowy-sunny |
sunny-cloudy |
sunny |
thermometer-cold |
thermometer-hot |
thunder |
windy |
例
| 説明 | 例 |
|---|---|
taped_y スタイル テンプレートのタイトルと 2 行を含む天気メモ。 |
|
| 冬の思い出を楽しみましょう。 |
|
枠線付きフォント テキスト ブロック（アイコンなし）
背景が白いテキスト ブロックを作成できます。アイコンが必要な場合は、アイコンをサポートする単一行のバリエーションの使用を検討してください。
構文
chst=d_text_outline chld=<text_fill_color>|<font_size>|<text_alignment>|<outline_color>|<font_weight>|<text_line_1>|...|<text_line_n>
- <text_fill_color>
- テキストの塗りつぶしの色。6 桁の 16 進数色コードです。アルファ値は使用できません。
- <font_size>
- フォントサイズ（ピクセル単位）を指定する番号。
- <text_alignment>
- ヘッダーを含むすべてのテキストの配置。次のいずれかの値を選択します。
- l - （'L'）左揃え
- h - 中央揃え
- r - 右揃え
- <outline_color>
- テキストのアウトラインの色。6 桁の 16 進数色コードです。アルファ値は使用できません。
- <font_weight>
- 標準テキストまたは太字テキスト。アンダースコア ' _' 標準テキスト、'b' 太字テキスト。
- <text_line_1>| ...|<text_line_n>
- メモのテキスト。改行は | 文字で指定します。
chst=d_fnote_titleの場合、テキストの最初の行はタイトルとしてフォーマットされます。
例
chst=d_text_outline |
chst=d_text_outline |
枠線付きフォント テキストのブロック（アイコン）
テキストの 1 行と、ブロックの上、左、下、または右にアイコンを作成できます。アイコンが不要な場合は、枠線付きフォント テキスト ブロックを使用してください。
構文
chst=<icon_position_string> chld=<text>|<font_size>|<font_fill_color>|<icon_name>|<icon_size>|<icon_fill_color>|<icon_and_text_border_color>
- <icon_position_string>
- テキスト ボックス内のアイコンを配置する場所を指定します。次のいずれかの値を選択します。
d_simple_text_icon_below- ボックスの下部にアイコンを配置します。d_simple_text_icon_above- ボックスの上部にアイコンを配置します。d_simple_text_icon_left- ボックスの左側にアイコンを配置します。d_simple_text_icon_right- ボックスの右側にアイコンを配置します。
- <テキスト>
- 表示するテキスト。1 行のみ。スペースの場合は + を使用します。
- <font_size>
- フォントサイズ（ピクセル単位）を指定する番号。
- <font_fill_color>
- テキストの塗りつぶし色。6 桁の文字列で表します。alpha の値はサポートされていません。
- <icon_name>
- このドキュメントの下部に記載されているアイコン名のいずれか。
- <icon_size>
- アイコンの高さ（ピクセル単位）。指定できる値は 12、16、24 です。
- <icon_fill_color>
- アイコンの色。6 桁の文字列で表します。alpha の値はサポートされていません。
- <icon_and_text_border_color>
- アイコンとテキストの周りの枠線の色を 6 桁の文字列で表します。alpha の値はサポートされていません。
コンテキスト アイコン（ダイナミック マーカーのみ）
割り当てるポイントに応じて色、サイズ、積み重ねが異なるアイコンを指定できます。これらのアイコンタイプは、ダイナミック アイコン マーカー（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>]
- 配置
- ポイントとアイコンの位置合わせを表す 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 進数色コード（# 記号なし）で指定します。これは、利用可能なデータ範囲内の最も低い値に関連付けられます。
- <mid_color>
- 範囲の中央値。3 桁または 6 桁の HTML 16 進数色コード（# 記号なし）で示されます。利用可能なデータ範囲の中央値となります。
- <high_color>
- 範囲内の高色の値。3 ～ 6 桁の HTML 16 進数色値（# は不可）で示されます。これは、利用可能なデータ範囲内で最も高い値に関連付けられます。
- <icon_size>
- アイコンのサイズ（ピクセル単位）。指定できる値は 12、16、24 です。
- <outline_color>
- アイコンのアウトラインの色を、3 桁または 6 桁の HTML 16 進数色で示します（# マークなし）。
- <配置>
- アイコンの配置とオフセットを説明するオプションの文字列。
サンプル
|
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>
- アイコンのサイズを変えるために使用されるデータ系列のゼロベースのインデックス。
- <zero_value_size
- 系列の最小データ値における、アイコンの基本サイズ。
- <size_multiplier>
- サイズ調整係数。この値に各アイコンのデータ値と最小の系列値の差を掛けて、最終的なアイコンサイズを計算します。したがって、データ乗算値が 0 のアイコンは、この乗数の影響を受けません。
- <min_size>
- アイコンの最小サイズ（ピクセル単位）。
- <outline_color>
- アイコンのアウトラインの色を、3 桁または 6 桁の HTML 16 進数色で示します（# マークなし）。
- <fill_color>
- 3 ～ 6 桁の HTML 16 進数色でアイコンの塗りつぶしの色（# マークなし）。
- <配置>
- アイコンの配置とオフセットを説明するオプションの文字列。
例
| 基本的な例ゼロ値のアイコンは、ゼロ値のサイズ（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>
- 範囲内の色の最低値。3 ～ 6 桁の HTML 16 進数色コード（# 記号なし）で指定します。これは、利用可能なデータ範囲内の最も低い値に関連付けられます。
- <mid_color>
- 範囲の中央値。3 桁または 6 桁の HTML 16 進数色コード（# 記号なし）で示されます。利用可能なデータ範囲の中央値となります。
- <high_color>
- 範囲内の高色の値。3 ～ 6 桁の HTML 16 進数色値（# は不可）で示されます。これは、利用可能なデータ範囲内で最も高い値に関連付けられます。
- <size_data_series>
- アイコンのサイズを変えるために使用されるデータ系列のゼロベースのインデックス。
- <zero_value_size
- 系列の最小データ値における、アイコンの基本サイズ。
- <size_multiplier>
- サイズ調整係数。この値に各アイコンのデータ値と最小の系列値の差を掛けて、最終的なアイコンサイズを計算します。したがって、データ乗算値が 0 のアイコンは、この乗数の影響を受けません。
- <min_size>
- アイコンの最小サイズ（ピクセル単位）。
- <outline_color>
- アイコンのアウトラインの色を、3 桁または 6 桁の HTML 16 進数色で示します（# マークなし）。
- <配置>
- アイコンの配置とオフセットを説明するオプションの文字列。
例
この例では 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>
- データシリーズの 0 から始まるインデックス。その時点で配置されるアイコンの数の計算に使用されます。
- <scaling_factor>
- ソースデータ系列の値は 0 から 1 の値にスケーリングされ、この値を掛けて、このポイントに配置するマーカーの数が決定されます。値の一部は切り捨てられています。
- <stack__direction>
- 縦方向: 水平方向の場合は「h」、垂直方向の場合は「V」、大文字の場合。
- <icon_size>
- 各マーカーのサイズ（ピクセル単位）。指定できる値は 12、16、24 です。
- <fill_color>
- 3 ～ 6 桁の HTML 16 進数色でアイコンの塗りつぶしの色（# マークなし）。
- <outline_color>
- アイコンのアウトラインの色を、3 桁または 6 桁の HTML 16 進数色で示します（# マークなし）。
- <間隔>
- スタック内の各マーカーの間に配置するスペース（ピクセル単位）。
- <配置>
- アイコンの配置とオフセットを説明するオプションの文字列。
サンプル
この例では、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>
- データシリーズの 0 から始まるインデックス。その時点で配置されるアイコンの数の計算に使用されます。
- <scaling_factor>
- ソースデータ系列の値は 0 から 1 の値にスケーリングされ、この値を掛けて、このポイントに配置するマーカーの数が決定されます。値の一部は切り捨てられています。
- <stack__direction>
- 縦方向: 水平方向の場合は「h」、垂直方向の場合は「V」、大文字の場合。
- <icon_size>
- 各マーカーのサイズ（ピクセル単位）。指定できる値は 12、16、24 です。
- <color_data_series>
- アイコンの色を変化させるために使用されるデータ系列のゼロベースのインデックス。
- <low_color>
- 範囲内の色の最低値。3 ～ 6 桁の HTML 16 進数色コード（# 記号なし）で指定します。これは、利用可能なデータ範囲内の最も低い値に関連付けられます。
- <mid_color>
- 範囲の中央値。3 桁または 6 桁の HTML 16 進数色コード（# 記号なし）で示されます。利用可能なデータ範囲の中央値となります。
- <high_color>
- 範囲内の高色の値。3 ～ 6 桁の HTML 16 進数色値（# は不可）で示されます。これは、利用可能なデータ範囲内で最も高い値に関連付けられます。
- <outline_color>
- アイコンのアウトラインの色を、3 桁または 6 桁の HTML 16 進数色で示します（# マークなし）。
- <間隔>
- スタック内の各マーカーの間に配置するスペース（ピクセル単位）。
- <配置>
- アイコンの配置とオフセットを説明するオプションの文字列。
サンプル
|
chem= |
画像リスト
次の画像は、適切なパラメータを使用する動的アイコンで使用できます。
注: テキスト文字列では、大文字と小文字が区別されます。
注: アイコンは、12、16、24 のサイズでのみ使用できます。
基本アイコン
Glyphish.com のアイコン
これらのアイコンは Joseph Wain / glyphish.com によるものです。この作品はクリエイティブ・コモンズの表示 3.0 米国ライセンスにより使用許諾されています。