忍者ブログ

2024
11
23

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/23 (Sat.)

2010
08
21

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

前回の「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

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

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

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


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


PR

[つづきはこちら]

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

2010
08
20

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

2010
08
18

2010
08
17

Google Chart API を利用して、QRコードを表示する。


Google Chart API を利用して、QRコードを表示します。

"qr.js"を呼び出す記述をしたところに、QRコードが現れます。

<script src="http://blog.cnobi.jp/v1/blog/user/c1c990de467ed4f31a60b43ae3632205/1282025622"></script>

ソースは、 http://blog.cnobi.jp/v1/blog/user/c1c990de467ed4f31a60b43ae3632205/1282025622

Google Chart API のQRコード表示は、チャートタイプ(Chart Type)のパラメータ「cht」に"qr"を指定し、QRコードのデータを「chl」パラ メータに指定することで行います。チャートサイズ(Chart Size)は、「chs」で指定します。つまり「http://chart.apis.google.com/chart? cht=qr&chs=150x150&chl=文字列」のように記載します。そうすると、文字列がQRコードに変換されて PNG画像が返ってきます。IMG要素のsrc 属性にこれを指定することで、これをページに表示することができます。

http://blog.cnobi.jp/v1/blog/user/c1c990de467ed4f31a60b43ae3632205/1282025622では、ページのURLを location.href で取得して、chlパラメータの値に入れています。

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

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

10 2024/11 12
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア