このページでは、コールアウト、バブル、ピン、その他のグラフィックを作成して、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 文字列にはエンコードされていない値（例: station）が使用され、バックグラウンドでエンコードされます。ただし、グラフの URL を表示しているユーザーが、このような処理を行っていないブラウザを使用している可能性もあります。そのため通常は、テキスト文字列で ASCII 以外の文字をすべて UTF-8 でエンコードすることをおすすめします。これは、バブルまたはピンとして表示されるテキスト専用で、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 つあり、まずロバートが描画し、次にアリスがバブルとして表示されます。
アリスの影がロバートの部分をどのように覆っているかに注目してください。これを修正するには、まず Alice のシャドウを描画し、次に Robert のバブルを描画してから Alice のシャドウを描画します。照明や影に関しては、現実的とは言えないかもしれませんが、バブルを遮るものがもう 1 つあることは避けます。
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
すべてのマーカーに 1 の同じ Z オーダー（py=1）が指定されているため、マーカーはチャート要素（チャートライン）の上にリストされた順序で描画されます。まずアリスの影が描画され、その上にロバートのバブルが描画され、最後にアリスのバブルが描画されます。
シャドウのみを描画できるかどうかについては、各アイコンの種類のドキュメントをご覧ください。
アイコンのタイプ
| タイプ | 例 |
|---|---|
| ふきだし - 小型または大型のテキストふきだし（アイコンあり、またはなし）を選択します。 | |
| ピン - ピンの種類はプレーン、スター、傾斜があり、アイコン、1 文字、または長いテキスト文字列を指定できます。 | |
| テキストとオプションのタイトルを使用した楽しいスタイルのメモ | |
| タイトル、テキスト、天気アイコンを含む天気予報のメモ | |
| 複数行枠線付きのテキスト ブロック、アイコンなし | |
| アイコン付きの 1 行で囲まれているテキストブロック | |
| コンテキスト アイコン |
バブル
バブルには、大きなサイズと小さいサイズのアイコン、1 行または複数行のテキスト、さまざまな機能の組み合わせがあります。次の表に、バブルの種類とバブルの構文を示します。各パラメータ値の説明については、以下の表をご覧ください。
その他の注意事項:
- すべてのバブルは、入力したテキストの幅と高さに合わせてサイズ変更されます。
- バブルを自立したダイナミック アイコンとして使用する場合は、
chstのバブル定数を使用します。また、バブルを埋め込みの動的アイコン マーカーとして使用する場合は、chemのバブル定数を使用します。 - バブル定数は、末尾が
_withshadowのバリエーションをサポートします。_withshadowバリエーションを使用すると、バブルの下にシャドウが追加されます。 - 埋め込まれた動的アイコン マーカーとしてバブルを使用する場合、
chld文字列構文は同じです。ただし、埋め込まれた動的アイコン マーカーのドキュメントで説明されているように、すべての区切り文字は , に置き換えられます。
| テキスト | icon | chst（自立型）と chem（マーカー）型の値 |
chld の構文 |
シャドウのみ | 例 |
|---|---|---|---|---|---|
| 1 行 | いいえ |
|
chld= |
chst= |
chst=d_bubble_text_small |
| 1 行 | Yes |
|
chld= |
chst= |
chst=d_bubble_icon_text_small |
| 1 行 | Yes |
|
chld= |
chst= |
chst=d_bubble_icon_text_big |
| 複数行 | いいえ |
|
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>
- テキストの色。HTML 16 進数 6 桁の色です。
- <<テキスト>
- バブルを 1 行で表現するバブル。スペースは + 記号にする必要があります。
- <text_line_1>|...|<テキスト行_n>
- 複数行のテキストバブルでは、1 行以上のテキスト。各行は | 記号で区切ります。最初の行は太く太字で表示されます。 スペースは「+」に置き換える必要があります。
シャドウのみ
バブルの場合、上の表に示す構文を使用して、自立型のシャドウを描画することもできます。例:
chst= |
chst= |
chst= |
chst= |
chst= |
ピン
アイコンや短いテキスト文字列を使用して、さまざまなピンを作成できます。利用できるピンのタイプは次のとおりです。
| ピンのタイプ | バブル定数 | 例 |
|---|---|---|
| 文字またはアイコンが 1 つだけのプレーンピン |
|
|
| 1 つの文字またはアイコンを含む斜線とスター付きのピン |
|
|
| 拡張可能、回転可能、複数行ピン | 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>
- （アイコンピンのみ] このドキュメントの最後に記載されているアイコンのいずれか 1 つを指定する文字列。
- <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>
- <<ピンのスタイル>
- ピンのスタイル。次のいずれかの定数を選択します。
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>
- <scale_factor>
- ピンのサイズを指定するためのスケーリング ファクタ。正の浮動小数点数です。0.5 はスケーリングされていないピンのサイズです。0.25 はそのサイズの半分、1 はそのサイズの 2 倍というようになります。
- <rotation_deg>
- ピンの回転（度）。正と負の値は設定可能です。 垂直ピンには 0 を指定します。
- <fill_color>
- バブルの塗りつぶしの色（6 桁の HTML 16 進数の色コード）。
- <font_size>
- テキストのフォントサイズ（ピクセル単位）。
- <font_style>
- 標準テキストの場合は「_」（アンダースコア）、太字テキストの場合は「b」のいずれかです。
- <text_line_1>...<text_行_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 行目がタイトル（太字、太字）の形式になります。 - <note_type>
- メモの形状を表す文字列。下の表で、メモタイプの文字列のいずれかを選択します。
- <メモのサイズ>
- （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は気象情報を示します。- <note_type>
- このメモに使用するテンプレート。上記のファンスタイルのメモのリストに記載されているいずれかのメモ文字列を使用します。
- <天気情報>
- 下の表にある天気アイコンの文字列。メモには 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 桁の文字列で指定します。アルファ値はサポートされていません。
- <icon_name>
- このドキュメントの下部に記載されているアイコン名のいずれか。
- <icon_size>
- アイコンの高さ（ピクセル単位）サポートされている値は、12、16、24 です。
- <icon_fill_color>
- アイコンの色（6 桁の文字列）。アルファ値はサポートされていません。
- <icon_and_text_border_color
- アイコンとテキストを囲む枠線の色。6 桁の文字列で表します。アルファ値はサポートされていません。
コンテキスト アイコン（動的マーカーのみ）
アイコンを割り当てるポイントに応じて、色、サイズ、重ね方を変更できます。これらのアイコンの種類は、ダイナミック アイコン マーカーとしてのみ使用でき、自立アイコンとしては使用できません。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 文字。たとえば、左上や
rbなどがあります。tl完全なリストと説明については、chemパラメータの alignment_string パラメータの説明をご覧ください。 - h_anchor_offset
- （省略可）: アンカー ポイントの水平方向のオフセット（ピクセル単位）。値（ゼロを含む ）の前には、+ または - を付ける必要があります。重要: + は %2B として + エンコードする必要があります。
- 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>
- アイコンの枠線の色。HTML 16 進数の 3 桁または 6 桁の色です（# マークなし）。
- <配置>
- アイコンの配置とオフセットを説明するオプションの文字列。
例
|
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>
- アイコンの枠線の色。HTML 16 進数の 3 桁または 6 桁の色です（# マークなし）。
- <fill_color>
- アイコンの塗りつぶし色。3 桁または 6 桁の HTML の 16 進数色コードです（# 記号なし）。
- <配置>
- アイコンの配置とオフセットを説明するオプションの文字列。
例
| 基本的な例:値が 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>
- 範囲内における低い色の値（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>
- アイコンの枠線の色。HTML 16 進数の 3 桁または 6 桁の色です（# マークなし）。
- <配置>
- アイコンの配置とオフセットを説明するオプションの文字列。
例
この例では 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 から 1 の値にスケーリングされ、この値にポイントが配置されるマーカーの数が決まります。値の一部が切り捨てられます。
- <stacking_direction>
- 縦方向: 水平方向の場合は「h」（小文字）、垂直方向の場合は「V」（大文字）を指定します。
- <icon_size>
- 各マーカーのサイズ（ピクセル単位）。サポートされている値は、12、16、24 です。
- <fill_color>
- アイコンの塗りつぶし色。3 桁または 6 桁の HTML の 16 進数色コードです（# 記号なし）。
- <outline_color>
- アイコンの枠線の色。HTML 16 進数の 3 桁または 6 桁の色です（# マークなし）。
- <間隔>
- スタック内の各マーカーの間に配置されるスペース（ピクセル単位）。
- <配置>
- アイコンの配置とオフセットを説明するオプションの文字列。
例
この例では、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 から 1 の値にスケーリングされ、この値にポイントが配置されるマーカーの数が決まります。値の一部が切り捨てられます。
- <stacking_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>
- アイコンの枠線の色。HTML 16 進数の 3 桁または 6 桁の色です（# マークなし）。
- <間隔>
- スタック内の各マーカーの間に配置されるスペース（ピクセル単位）。
- <配置>
- アイコンの配置とオフセットを説明するオプションの文字列。
例
|
chem= |
画像リスト
適切なパラメータを使用してダイナミック アイコンに次の画像を使用できます。
注: テキスト文字列では大文字と小文字が区別されます。
注: アイコンは、12、16、24 のサイズでのみご利用いただけます。
基本的なアイコン
Glyphish.com のアイコン
これらのアイコンは Joseph Wain / glyphish.com によるものです。この作品はクリエイティブ・コモンズ表示 3.0 米国ライセンスにより使用許諾されています。