寝太郎の江戸風呂。ね！

[PR]

2024/05/21 (Tue.)

文字列に枠を付けた画像を作成する。Dynamic Icons - Google Chart Tools

前回の「文字列を画像にする。Dynamic Icons - Google Chart Tools」では、Google Chart Tools/Image Charts(aka Chart API)の Dynamic Icons を利用して、文字列をアウトラインフォントのようにして画像で返すツールを記事にしました。今回は、文字列を矢印や吹き出しで囲んだ画像にして返すツールを紹介します。
「Fun Style Note」というタイプの画像作成ツールです。下記のフォームにテキストやパラメータを入力して、「getPNG(Fun Style Note)」ボタンを押して下さい。入力したテキストを持つPNGイメージが作成されます。


Fun Style Notes は現在、次の６種類です。
大きさは、それぞれ大小の２種類が用意されています。下に表示しているのは小さい方です。


記事の中の強調したいところや注意点を表現する場合に便利ですね。

2010/08/24 (Tue.) Trackback() Comment(0) Google Chart

文字列を画像にする。Dynamic Icons - Google Chart Tools

Google Chart Tools/Image Charts(aka Chart API)には、Dynamic Icons というアイコンを作成するための API があります。その中に文字列をアウトラインフォントのようにして画像で返すツールが用意されています。返される画像は PNG イメージです。

文字列は、UTF-8 で URLエンコードする必要があります。いちいち「encodeURIComponent で文字列を UTF-8でURIエンコード。」を使ってエンコードしてから、URL を組み立てるのは面倒なので、一気に画像を作成するツールを作成しました。


複数行にしたいときは、テキストをパイプ「|」で区切って下さい。

2010/08/23 (Mon.) Trackback() Comment(0) Google Chart

Google Map Chart にタイトル、凡例などを追加する。

前々回の「Google Chart Tools の Map Chart で日本地図。」、前回の「都道府県を色分けした地図を作る。」と続き、Google Chart Tools/Image Charts(aka Chart API) の Map Chart を使って、国、地域の形を作りました。今回は、これらに標題や凡例、フラグなどを用いて情報を付け加えましょう。

題材には、今年の夏の甲子園を取り上げましょう。
まず、優勝の沖縄、興南高校です。

http://chart.apis.google.com/chart
?cht=map:fixed=26,127.5,27,129
&chs=200x100
&chld=JP-47
&chco=999999|FF0000&chm=fChampion,000000,0,1,10
&chdl=%E8%88%88%E5%8D%97
&chtt=%E7%86%B1%E9%97%98+
%E5%A4%8F%E3%81%AE%E7%94%B2%E5%AD%90%E5%9C%92|
2010

チャート上にマーカーを付加するには、chmパラメータを使います。最初の１文字はマーカーの種類です。「f」はフラグです。2文字目以降にフラグの入れる文字列、色、系列、系列の何番目か、大きさをカンマで区切って指定します。

chdlパラメータは、凡例です。日本語は UTF-8 でURLエンコードする必要があります。私は「encodeURIComponent で文字列を UTF-8でURIエンコード。」で変換しました。

chttパラメータは、チャートタイトルを指定します。 これも日本語は、UTF-8 でURLエンコードする必要があります。スペース文字には「+」改行はパイプ「|」を使います。

続いてベスト８です。

http://chart.apis.google.com/chart
?cht=map:fixed=31,129,46,146
&chs=400x300
&chld=JP-14|JP-28|JP-12|JP-07|JP-43|JP-13|JP-15
&chco=999999|FF3300|FF6600|FF9900|FFCC00|FFFF00|FFFF33|FFFF66
&chdl=%E6%9D%B1%E6%B5%B7%E5%A4%A7%E7%9B%B8%E6%A8%A1
|%E5%A0%B1%E5%BE%B3%E5%AD%A6%E5%9C%92|
%E6%88%90%E7%94%B0|
%E8%81%96%E5%85%89%E5%AD%A6%E9%99%A2|
%E4%B9%9D%E5%B7%9E%E5%AD%A6%E9%99%A2|
%E9%96%A2%E6%9D%B1%E4%B8%80|
%E6%96%B0%E6%BD%9F%E6%98%8E%E8%A8%93

2010/08/22 (Sun.) Trackback() Comment(0) Google Chart

都道府県を色分けした地図を作る。

前回の「Google Chart Tools の Map Chart で日本地図。」では、Google Chart Tools/Image Charts(aka Chart API) の Map Chart を用いて、日本地図を作成しました。今回は、同じく Map Chart を使って、都道府県を色分けしましょう。



http://chart.apis.google.com/chart
?cht=map:fixed=31,129,46,146
&chs=300x300
&chld=JP-01|
JP-02|JP-03|JP-04|JP-05|JP-06|JP-07|
JP-08|JP-09|JP-10|JP-11|JP-12|JP-13|JP-14|
JP-15|JP-16|JP-17|JP-18|JP-19|JP-20|JP-21|JP-22|JP-23|
JP-24|JP-25|JP-26|JP-27|JP-28|JP-29|JP-30|
JP-31|JP-32|JP-33|JP-34|JP-35|
JP-36|JP-37|JP-38|JP-39|
JP-40|JP-41|JP-42|JP-43|JP-44|JP-45|JP-46
&chd=t:50,
40,40,40,40,40,
0,0,0,0,0,0,0,
20,20,20,20,20,20,20,20,20,
10,10,10,10,10,10,10,10,
30,30,30,30,30,
40,40,40,40,
50,50,50,50,50,50,50
&chco=999999,FF0000,0000FF,666666

色分けの方法には２種類あります。
１）グラデーションを作成して、その数値を指定する方法。
２）色コードを指定する方法

上記のイメージ46都道府県図は、１）の数値を指定する方法を採用して作成しています。
パラメータ chd で各地域に対応させる数値を割り当てます。また、パラメータ chco の各値は、グラデーションを生成するためのもので、カンマで区切ります。

沖縄は別のイメージとして表示しています。
http://chart.apis.google.com/chart
?cht=map:fixed=26,127.5,27,129
&chs=100x100
&chld=JP-47
&chco=999999|4444FF


次に　２）の色コードを指定する場合のサンプルを示しましょう。

[つづきはこちら]

2010/08/21 (Sat.) Trackback() Comment(0) Google Chart

Google Chart Tools の Map Chart で日本地図。

Google Chart Tools/Image Charts(aka Chart API) に Map Chart という地図をPNGイメージで返すサービスがあります。この Map Chart を利用すると、国別や地域別に色分けした地図を作成できます。日本の場合は、都道府県レベルまで区分できます。

まずは、日本を表示してみましょう。


http://chart.apis.google.com/chart
?cht=map
&chs=300x300
&chld=JP&
chco=999999|FF4444

この指定の内容は次のとおり。
チャートタイプ(cht)は map
チャートサイズ(chs)は 300px × 300px
(最大 300,00pixels、ただし縦横とも600pxまで）
チャートラインデータ(chld)に国名コードまたは地域コードを指定。
(国名コードはISO 3166-1-alpha-2 codes　参照））
チャートカラー(chco)　は、指定箇所以外は 999999 一番目の場所の色は FF4444。

このように指定することで、色分け地図がPNGイメージで返ってきます。ただ、これだけの指定では、想像していた地図より範囲が広く感じるかもしれません。小さな島も含めて領土全域が表示されるからです。表示領域を限定したい場合には、範囲の座標を指定します。

[つづきはこちら]

2010/08/20 (Fri.) Trackback() Comment(0) Google Chart