ダイナミック アイコン

   スタンドアロンの画像と同じダイナミック アイコン マーカー。

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

目次

  1. はじめに
    1. 独立型アイコン
    2. 動的マーカー
  2. 一般的なアイコンの機能
    1. テキスト文字列
    2. シャドウ
  3. アイコンのタイプ
  4. バブル
  5. ピン
  6. 楽しいスタイルのメモ
  7. 天気予報に関する注意事項
  8. 枠線付きフォント テキスト ブロック(アイコンなし)
  9. 枠線付きフォント テキスト ブロック(アイコン)
  10. コンテキスト アイコン
  11. 画像リスト

はじめに

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 文字列にはエンコードされていない値(例: 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 行で囲まれているテキストブロック
コンテキスト アイコン コンテキスト アイコンの例

トップへ戻る

 

バブル

バブルには、大きなサイズと小さいサイズのアイコン、1 行または複数行のテキスト、さまざまな機能の組み合わせがあります。次の表に、バブルの種類とバブルの構文を示します。各パラメータ値の説明については、以下の表をご覧ください。

その他の注意事項:

  • すべてのバブルは、入力したテキストの幅と高さに合わせてサイズ変更されます。
  • バブルを自立したダイナミック アイコンとして使用する場合は、chst のバブル定数を使用します。また、バブルを埋め込みの動的アイコン マーカーとして使用する場合は、chem のバブル定数を使用します。
  • バブル定数は、末尾が _withshadow のバリエーションをサポートします。_withshadow バリエーションを使用すると、バブルの下にシャドウが追加されます。
  • 埋め込まれた動的アイコン マーカーとしてバブルを使用する場合、chld 文字列構文は同じです。ただし、埋め込まれた動的アイコン マーカーのドキュメントで説明されているように、すべての区切り文字は , に置き換えられます。
テキスト icon chst(自立型)と chem(マーカー)型の値 chld の構文 シャドウのみ
1 行 いいえ

chst=d_bubble_text_small[_withshadow]

chem=bubble_text_small[_withshadow]

chld=
  <frame_style>|
  <text>|
  <fill_color>|
  <text_color>
chst=
  [d_]bubble_text_small_shadow
chld=
  <frame_style>|
  <text>

chst=d_bubble_text_small
chld=
  bb|
  Launch+site|
  C6EF8C|
  000000
1 行 Yes

chst=d_bubble_icon_text_small[_withshadow]

chem=bubble_icon_text_small[_withshadow]

chld=
  <icon_string>|
  <frame_style>|
  <text>|
  <fill_color>|
  <text_color>
chst=
  [d_]bubble_icon_text_small_shadow
chld=
  <icon_string>|
  <frame_style>|
  <text>

chst=d_bubble_icon_text_small
chld=
  wc|
  bb|
  Pay+Toilets|
  C6EF8C|
  000000
1 行 Yes

chst=d_bubble_icon_text_big[_withshadow]

chem=bubble_icon_text_big[_withshadow]

chld=
  <icon_string>|
  <frame_style>|
  <text>|
  <fill_color>|
  <text_color>
chst=
  [d_]bubble_icon_text_big_shadow
chld=
  <icon_string>|
  <frame_style>|
  <text>

chst=d_bubble_icon_text_big
chld=
  snack|
  bb|
  $2.99+!|
  FFBB00|
  000000
複数行 いいえ

chst=d_bubble_texts_big[_withshadow]

chem=bubble_texts_big[_withshadow]

chld=
  <frame_style>|
  <fill_color>|
  <text_color>|
  <text_line_1>
   |...|
  <text_line_n>
chst=
  [d_]bubble_texts_big_shadow
chld=
  <frame_style>|
  <text_line_1>
   |...|
  <text_line_n>

chst=d_bubble_texts_big
chld=
  bb|
  FFB573|
  000000|
  Help+Wanted|
  Hours:+Midnight+to+3:00+AM|
  Good+pay,+interesting+work|
  Contact+V.+Helsing
複数行 Yes

chst=d_bubble_icon_texts_big[_withshadow]

chem=bubble_icon_texts_big[_withshadow]

chld=
  <icon_string>|
  <frame_style>|
  <fill_color>|
  <text_color>|
  <text_line_1>
   |...|
  <text_line_n>
chst=
  [d_]bubble_icon_texts_big_shadow
chld=
  <icon_string>|
  <frame_style>|
  <text_line_1>
   |...|
  <text_line_n>

chst=d_bubble_icon_texts_big
chld=
  home|
  bb|
  FFB573|
  000000|
  Haunted+House|
  Hours:+Midnight+to+3:00+AM|
  Ghouls,+Goblins,+and+Vampires|
  Bring+your+own+wooden+stake

構文

<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 行以上のテキスト。各行は | 記号で区切ります。最初の行は太く太字で表示されます。 スペースは「+」に置き換える必要があります。

シャドウのみ

バブルの場合、上の表に示す構文を使用して、自立型のシャドウを描画することもできます。例:

d_bubble_text_small マーカーのシャドウ
chst=
  d_bubble_text_small_shadow
chld=
  bb|Launch+site
d_bubble_icon_text_small マーカーのシャドウ
chst=
  d_bubble_icon_text_small_shadow
chld=
  wc|bb|Pay+Toilets
d_bubble_icon_text_big マーカーのシャドウ
chst=
  d_bubble_icon_text_big_shadow
chld=
  snack|bb|$2.99+!
d_bubble_texts_big マーカーのシャドウ
chst=
  d_bubble_texts_big_shadow
chld=
  bb|Help+Wanted|
  Hours:+Midnight+to+3:00+AM|
  Good+pay,+interesting+work|
  Contact+V.+Helsing
d_bubble_icon_texts_big マーカーのシャドウ
chst=
  d_bubble_icon_texts_big_shadow
chld=
  home|bb|Haunted+House|
  Hours:+Midnight+to+3:00+AM|
  Ghouls,+Goblins,+and+Vampires|
  Bring+your+own+wooden+stake

 

トップへ戻る

 


ピン

アイコンや短いテキスト文字列を使用して、さまざまなピンを作成できます。利用できるピンのタイプは次のとおりです。

ピンのタイプ バブル定数
文字またはアイコンが 1 つだけのプレーンピン

chst=d_map_pin_letter[_withshadow]
chst=d_map_pin_icon[_withshadow]

chem=map_pin_letter[_withshadow]
chem=map_pin_icon[_withshadow]

文字が記された無地のピンアイコン付きのシンプルなピン
1 つの文字またはアイコンを含む斜線とスター付きのピン

chst=d_map_xpin_letter[_withshadow]
chst=d_map_xpin_icon[_withshadow]

chem=map_xpin_letter[_withshadow]
chem=map_xpin_icon[_withshadow]

拡張可能、回転可能、複数行ピン 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
chld=A|FF0000|0000FF

chst=d_map_pin_letter
chld=%E5%8D%B1|FF0000|000000

chst=d_map_pin_icon
chld=camping|ADDE63

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
  • pin_star
  • pin_sleft
  • pin_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
chld=pin_star|A|FF0000|000000

chst=d_map_xpin_letter
chld=pin_sleft|A|FF0000|000000

chst=d_map_xpin_icon
chld=pin_sleft|bank-dollar|52B552

chst=d_map_xpin_shadow
chld=pin_sleft

トップへ戻る

 


スケーリングと回転を伴うテキストピン

これは長いテキスト文字列を含むように手動でスケーリングできるピンです。 ピンの回転、カスタムサイズ、フォントサイズや色の管理も可能です。

構文

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
chld=1.7|180|C6E7DE|11|_|Raindrop

chst=d_map_spin
chld=2.1|0|FFFF42|13|b|Kumquats

chst=d_map_spin
chld=3|45|FFFF42|11|_|First+line|Second+line

トップへ戻る

 


楽しいスタイルのメモ

矢印スタイルのメモ

付箋や思考バブルなど、新しいテンプレートを使用してさまざまなテキストメモを作成できます。必要に応じて、メモにタイトル行を含めることができます。

これらのメモのサイズは固定されていますが、テキストのサイズに合わせて拡大または縮小されることはありません。

構文

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
chld=pinned_c|1|004400|l|Joe's|Today+2-for-1+!|555-1234
タイトルなしのメモ: chst=d_fnote.テキストは中央に配置されます。
chst=d_fnote
chld=thought|1|0088FF|h|Why+am+I+here?

今のジョークに役立つテンプレートです。


chst=d_fnote
chld=arrow_d|1|000000|h|Your|shoe's|untied

トップへ戻る

 


天気予報に関する注意事項

天気インジケーター アイコンを使ってメモを作成できます。楽しいスタイルのメモと似たレイアウトですが、テキストの色は常に黒、テキストは常に左揃えになります。追加できるのは 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_weather
chld=taped_y|sunny|Barcelona|max+25°C|min+15°C

冬を楽しみにしましょう。

chst=d_fnote
chld=thought|sunny|I+wish...

トップへ戻る

 


枠線付きフォント テキスト ブロック(アイコンなし)

 

矢印スタイルのメモ

枠線が白いテキスト ブロックを作成できます。アイコンが必要な場合は、アイコンをサポートする単一行のバリエーションを使用することを検討してください。

構文

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
chld=FFCC33|16|h|FF0000|b|Mad+Scientist|Boo


chst=d_text_outline
chld=FF65BB|20|h|00FF00|_|Freshly+Made+Pie

トップへ戻る

 

 


枠線付きフォント テキスト ブロック(アイコン)

枠線付きテキストに加え、ブロックの上、左、下、右にアイコンを 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=
  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>]
アライメント
アイコンとポイントの位置関係を示す 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 桁の色です(# マークなし)。
<配置>
アイコンの配置とオフセットを説明するオプションの文字列

  • 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]
アイコンのサイズを変化させるために使用されるデータ系列のゼロベースのインデックス。
<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=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 進数の色コード)。これは、利用可能なデータ範囲内の最小値に関連付けられています。
<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 - 1 つ目の系列は黄色の線を描画してピンの色を決定するために使用されます。2 番目の系列は青い線とピンサイズに使用されます。
  • chem=y - ダイナミック アイコンをレンダリングします。
  • s=cm_color_size - 色とサイズのバリエーションのコンテキスト アイコンを使用します。
  • ds=1 - データ系列 1(青い線)のアイテムをレンダリングします。
  • dp=all - すべてのポイントにアイコンを設定します。
  • d=
    • maps_pin - 地図上のピン記号を使用します。
    • 1 - データ系列 1 をピンの色に使用します。
    • 000,0FF,F55 - 低、中、高の色。
    • 0 - ピンサイズにはデータシリーズ 0 を使用します。
    • 10 - PIN は値 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>
この時点で配置するアイコンの数の計算に使用されるデータ系列のゼロベースのインデックス。
<スケーリング要素>
ソースデータ系列の値は 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 - 最初の系列は、線をプロットし、スタックの高さを決定するために使用されます。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>
この時点で配置するアイコンの数の計算に使用されるデータ系列のゼロベースのインデックス。
<スケーリング要素>
ソースデータ系列の値は 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=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

トップへ戻る

画像リスト

適切なパラメータを使用してダイナミック アイコンに次の画像を使用できます。

注: テキスト文字列では大文字と小文字が区別されます。

注: アイコンは、12、16、24 のサイズでのみご利用いただけます。

基本的なアイコン

Glyphish.com のアイコン

これらのアイコンは Joseph Wain / glyphish.com によるものです。この作品はクリエイティブ・コモンズ表示 3.0 米国ライセンスにより使用許諾されています。

フラグ

こちらは、一部の国と地域のフラグです。

トップへ戻る