重要: 動的でインタラクティブな Google グラフは積極的にメンテナンスされていますが、静的な Google Image Charts は 2012 年に正式にサポートを終了しました。2019 年 3 月 18 日に無効にいたしました。
このページでは、URL を使用して作成できる、さまざまなコールアウト、バブル、ピン、その他のグラフィックの作成方法について説明します。
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
- はじめに
- 構文
- アイコンタイプ
- バブル
- 固定
- 楽しいスタイルのメモ
- 天気予報メモ
- 枠線付きフォント テキストのブロック(テキストのみ)
- 枠線付きフォント テキストのブロック(テキスト + アイコン)
- 使用可能なフラグとアイコンのリスト
- テキスト文字列
- シャドウ
はじめに
テキストと画像を組み合わせて、興味を引くさまざまなコールアウト、ピン、バブルを作成できます。このようなアイテムはダイナミック アイコンと呼ばれます。
構文
ルート URL: https://chart.googleapis.com/chart?
動的アイコンは、? 記号の後の次のパラメータをサポートしています。で置き換えてください。
パラメータ | 必須または任意 | 説明 |
---|---|---|
chst=<icon_string_constant> |
必須 | 作成するアイコンの種類を記述します。
|
chld=<icon_data> |
必須 | アイコンのサイズ、回転、テキスト、その他の必須データの記述に使用される特定のデータ。
|
アイコンのタイプ
種類 | 例 |
---|---|
バブル - 小さいまたは大きいテキストのバブルを選択します。アイコンの有無は選択できません。 | |
ピン - ピンのタイプには、プレーン、スター付き、傾斜があり、アイコン、1 文字、または長いテキスト文字列を指定できます。 | |
テキストと任意のタイトルを含むファンスタイルのメモ | |
タイトル、テキスト、天気アイコンを含む天気予報メモ | |
複数行からなる枠線付きテキスト ブロック、アイコンなし | |
アイコン付きの 1 行枠線付きテキスト ブロック |
バブル
バブルには、大小、アイコンの有無、1 行のテキスト、複数行のテキストなど、さまざまな組み合わせがあります。バブルの種類とその構文を次の表に示します。各パラメータ値の説明については、次の表をご覧ください。
その他の注意事項:
- バブルはすべて、入力したテキストの幅と高さに合わせてサイズ変更されます。
- バブル定数は、
_withshadow
で終わるバリエーションをサポートします。_withshadow
のバリエーションを使用すると、バブルの下にシャドウが追加されます。
テキスト | icon | 構文 | シャドウのみ | 例 |
---|---|---|---|---|
1 行 | × | chst= |
chst= |
chst=d_bubble_text_small |
1 行 | Yes | chst= |
chst= |
chst=d_bubble_icon_text_small |
1 行 | Yes |
chst= |
chst= |
chst=d_bubble_icon_text_big |
複数行 | × | chst= |
chst= |
chst=d_bubble_texts_big |
複数行 | Yes |
|
chst= |
chst=d_bubble_icon_texts_big |
構文
- <アイコン文字列icon_string>
- このドキュメントの最後に記載されているアイコンのいずれかを指定する文字列。
- <frame_style>
- テール方向。次のいずれかのテール方向の定数を選択します。
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_colorfill_color>
- ふきだしの塗りつぶしの色。HTML の 6 桁の 16 進数色コードで指定します。
- <text_color>
- テキストの色。HTML の 6 桁の 16 進数色コードで指定します。
- <text>
- 1 行のバブルの場合は 1 行のバブルテキスト。スペースは + 記号で指定する必要があります。
- <text_line_1>|...|<text_line_n>
- 1 行または複数行のテキスト(複数行のテキストバブル)。各行は | 記号で区切られています。最初の行がより大きく太字で表示されます。 スペースは「+」に置き換える必要があります。
シャドウのみ
バブルの場合は、上記の表に示す構文を使用して、独立型のシャドウを描画することもできます。例:
chst= |
chst= |
chst= |
chst= |
chst= |
固定
アイコンや短いテキスト文字列を使って、さまざまなピンを作成できます。使用可能なピンタイプは次のとおりです。
ピンのタイプ | バブル定数 | 例 |
---|---|---|
1 つの文字またはアイコンを含むプレーンなピン |
|
|
1 つの文字またはアイコンが付いた傾斜/星付きピン |
|
|
スケーラブルで回転可能な複数行のピン | chst=d_map_spin |
1 つの文字またはアイコンを含むプレーンなピン
小さなアイコンまたは 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_colorfill_color>
- ふきだしの塗りつぶしの色。HTML の 6 桁の 16 進数色コードで指定します。
- <text_color>
- [テキストピンのみ] テキストの色(HTML の 6 桁の 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>
- ピンのスタイル。次のいずれかの定数を選択します。
pin
pin_star
pin_sleft
pin_sright
- <アイコン文字列icon_string>
- [アイコンピン] このドキュメントの最後に記載されているアイコンのいずれかを指定する文字列。
- <文字>
- [テキストピン] 1 つのテキスト文字。
- <fill_colorfill_color>
- ふきだしの塗りつぶしの色。HTML の 6 桁の 16 進数色コードで指定します。
- <text_color>
- [テキストピン] テキストの色(HTML の 6 桁の 16 進数色コード)。
- <star_fill_color>
- [星のピン] 星の塗りつぶし色。HTML の 6 桁の 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_colorfill_color>
- ふきだしの塗りつぶしの色。HTML の 6 桁の 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 行目がタイトルの書式設定(大きい太字)になります。 - <note_typenote_type>
- メモの形状を説明する文字列。以下の表にあるメモタイプの文字列のいずれかを選択します。
- <メモのサイズnote_size>
- 1(大きいメモ)または 2(小さいメモ)。テンプレートのサイズは固定されています。テンプレートがテキストに合わせて拡大または縮小することはありません。両方のサイズでテストして、テキストがより見やすいかを確認します。
- <text_color>
- テキストの色。6 桁の 16 進数色コードです。アルファ値は使用できません。
- <テキスト_位置揃えtext_alignment>
- ヘッダーを含むすべてのテキストの配置。次のいずれかの値を選択します。
- l - ('L')左揃え
- h - 中央揃え
- r - 右揃え
- <text_line_1>| ...|<text_line_1 text_line_1line_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_typenote_type>
- このメモに使用するテンプレート。上記の楽しいスタイルのノートリストに記載されているノートの文字列のいずれかを使用します。
- <天気情報アイコンweather_icon>
- 以下の表に示す天気アイコン文字列のいずれか。1 つのメモで 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>
- <テキスト_fill_colortext_fill_color>
- テキストの塗りつぶしの色。これは 6 桁の 16 進数色コードです。アルファ値は使用できません。
- <font_size>
- フォントサイズをピクセル単位で指定する数値。
- <テキスト_位置揃えtext_alignment>
- ヘッダーを含むすべてのテキストの配置。次のいずれかの値を選択します。
- l - ('L')左揃え
- h - 中央揃え
- r - 右揃え
- <outline_color>
- テキストの枠線の色。これは 6 桁の 16 進数色コードです。アルファ値は使用できません。
- <font_weight>
- 標準テキストまたは太字テキスト。標準テキストにはアンダースコア「_」、太字テキストには「b」を使用します。
- <text_line_1>| ...|<text_line_1 text_line_1line_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
- アイコンをボックスの右側に配置します。
- <text>
- 表示するテキスト。1 行のみ。スペースには「+」を使用します。
- <font_size>
- フォントサイズをピクセル単位で指定する数値。
- <font_fill_colorfont_fill_color>。
- テキストの塗りつぶしの色。6 桁の文字列で指定します。アルファ値はサポートされていません。
- <icon_name>
- このドキュメントの最後に記載されているアイコン名のいずれか。
- <icon_size>
- アイコンの高さ(ピクセル単位)。サポートされる値は、12、16、24 です。
- <icon_fill_color>
- アイコンの色。6 桁の文字列で指定します。アルファ値はサポートされていません。
- <icon_and_text_border_color>
- アイコンとテキストを囲む枠線の色。6 桁の文字列で指定します。アルファ値はサポートされていません。
使用可能なフラグとアイコンのリスト
以下の画像は、適切なパラメータを使用してダイナミック アイコンに使用できます。
注: テキスト文字列では大文字と小文字が区別されます。
注: 使用できるアイコンのサイズは、12、16、24 のみです。
基本的なアイコン
Glyphish.com のアイコン
これらのアイコンは Joseph Wain / glyphish.com によるものです。この作品はクリエイティブ・コモンズ表示 3.0 米国ライセンスにより使用許諾されています。
フラグ
以下は、一部の国や地域のフラグです。
テキスト文字列
リクエストで送信される表示テキストはすべて UTF-8 でエンコードしてから、URL でエンコードする必要があります。これは、URL セーフでない文字にのみ影響します(URL セーフな文字のほとんどは、a ~ z の英字の大文字と小文字、および短い句読点です)。たとえば、文字「è」は UTF-8 で URL エンコードされた値は「%C3%A8
」、中国語の文字の「駅」は「%E9%A7%85
」です。ほとんどのブラウザでは、エンコードされていない値を URL 文字列(例: 「駅」)で使用でき、バックグラウンドでエンコードされます。
ただし、画像 URL を表示しているブラウザがこれを行わない場合もあります。そのため、通常は、テキスト文字列内の ASCII 以外の文字をすべて UTF-8 で URL エンコードすることをおすすめします。なお、これはふきだしやピンに表示されるテキストにのみ適用されます。URL 構文に含まれる &、| などの文字には適用されません。
シャドウ
多くのアイコンにシャドウを付けたり、アイコンそのものを使用せずに一部のアイコンにシャドウを描画したりすることもできます。
影付きアイコン
これらのアイコンの多くは、シャドウの有無にかかわらず描画できます。シャドーイングを利用するオプションがある場合は、アイコン名に _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 |
自立型シャドウ
一部のアイコンタイプでは、シャドウ自体を描画できます。この方法は、グラフィック上で複数のシャドウが重なっているアイコンを使用していて、アイコンが近すぎて一方の影が別のグラフィックに重なってしまっている場合に便利です。シャドウのみを描画できるかどうかについては、特定のアイコンタイプのドキュメントをご覧ください。