警告: この API は 2012 年に非推奨となり、2019 年 3 月 18 日に無効になりました。代わりに、積極的にメンテナンスされている Google Charts API を使用してください。

ダイナミック アイコン

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

このページでは、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」でエンコードされた値 - は「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 行区切りのテキストブロック
コンテキスト アイコン コンテキスト アイコンの例

トップへ戻る

 

バブル

バブルでは、サイズの大小を問わず、アイコンの有無、1 行または複数行のテキストで、さまざまな組み合わせの機能を使用できます。次の表に、バブルの種類とそれぞれの構文を示します。各パラメータ値の説明は、表の下に表示されます。

備考

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

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
単一行 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
単一行 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
複数行 x

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>
テキストの色。6 桁の HTML 16 進数色で表示されます。
<テキスト>
1 行のバブルを表す 1 行のバブルテキスト。スペースは + 記号でなければなりません。
<text_line_1>|...|<text_line_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

 

トップへ戻る

 


ピン

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

ピンのタイプ バブル定数
単一の文字またはアイコンが表示されているシンプルなピン

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

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

文字が表示されたプレーンなピンシンプルなピンのアイコン
単一の文字またはアイコンが表示されている、斜面 / スター付きのピン

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>
アイコンピンのみ] このドキュメントの最後に記載されているアイコンのいずれかを指定する文字列。
<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_style>
ピンのスタイル。次のいずれかの定数を選択します。
  • 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>
<スケール係数>
ピンサイズを指定するスケーリング ファクタ。正の浮動小数点数です。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
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 を、小さなメモには 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 は気象情報を示します。
<メモの種類>
このメモに使用するテンプレート。上記のファンスタイルのメモリストにリストされているメモ文字列のいずれかを使用します。
<天気情報>
次の表の天気アイコン文字列のいずれかです。メモには 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 桁の文字列で表します。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=
  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 つの文字。例には、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 進数色で示します(# マークなし)。
<配置>
アイコンの配置とオフセットを説明するオプションの文字列

サンプル

  • 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>
アイコンのアウトラインの色を、3 桁または 6 桁の HTML 16 進数色で示します(# マークなし)。
<fill_color>
3 ~ 6 桁の HTML 16 進数色でアイコンの塗りつぶしの色(# マークなし)。
<配置>
アイコンの配置とオフセットを説明するオプションの文字列

基本的な例ゼロ値のアイコンは、ゼロ値のサイズ(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>
アイコンのアウトラインの色を、3 桁または 6 桁の HTML 16 進数色で示します(# マークなし)。
<配置>
アイコンの配置とオフセットを説明するオプションの文字列

この例では 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 - ピンは値 0 で 10 ピクセル。
    • 90 - 90 の倍数。
    • 10 - 10 ピクセル以上の PIN。
    • 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 から始まるインデックス。その時点で配置されるアイコンの数の計算に使用されます。
<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 - 最初の系列は、折れ線をプロットして、スタックの高さを決定するために使用されます。もう 1 つは、各アイコン スタックのベースを 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 から始まるインデックス。その時点で配置されるアイコンの数の計算に使用されます。
<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=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 米国ライセンスにより使用許諾されています。

フラグ

一部の国と地域のフラグは以下のとおりです。

トップへ戻る