!寝太郎のネット実験。ないブログに表示されています。新しい記事を書く事で広告が消えます。ページで利用しているWEBサービスについて、数回に渡って紹介しています。Chart」という棒グラフタイプのグラフを利用しています。そこでは、時間を横軸に取って時間的変化を見れるようにしました。時間を複数取ると少し複雑な処理が必要になります。そこで、今回は、シンプルなデータでもインパクトのある「Google-O-Meter」を利用します。Google-O-Meter「Google-O-Meter」は次のようなチャートです。機械の計器のような形をして針が値を示します。上記のイメージのソースURLは、次のとおりです。API」に共通するものです。サイトから送られてきます。PNGイメージを生成して返してくれるのです。Size)イメージのサイズを「chs=幅x高さ」で指定します。掛け合わせて、300,000ピクセル以内に収める必要があります。幅、高さの限度は、両方とも「1,000」です。Type)グラフの種類を「cht=種類」で指定します。Color)グラフの色を「chco=色」で指定します。複数の色を指定する場合には、カンマで区切ります。「Google-O-Meter」の場合、この順番で左から右にグラデーションがかかります。Axis)グラフに表示する軸を「chxt=軸」で指定します。複数指定する場合には、カンマで区切ります。下が「x」、左縦が「y」、上が「t」、右縦が「r」です。Label)1番目の軸を「0:」とし、指定した軸に表示する目盛をパイプ「|」で区切って指定します。Data)データのフォーマットには何種類かあります。Format)がよく利用されます。その場合には「chd=t:値」のように記述します。値が複数ある場合にはカンマ「,」で区切り、系列が複数ある場合にはパイプ「|」で区切ります。「Google-O-Meter」の場合、全体を100とした場合の値の割合を値とします。Title)グラフのタイトルを「chtt=タイトル」で指定します。スペースは「+」、改行は「|」。URIエンコードします。API」にリクエストするURLのサンプルを置きました。内容を書き換えて、ブラウザのアドレスバーに入力してみて下さい。https://chart.googleapis.com/chart?chs=200x150&cht=gom&chco=00FF00,FFFF00,CC0000&chxt=x,y&chd=t:89&chxl=0:|3029|1:|0|3400&chtt=%E6%9D%B1%E4%BA%AC%E9%9B%BB%E5%8A%9B%E6%B6%88%E8%B2%BB%E7%8E%87|2011-04-29+18%E6%99%82|89%+(%E4%B8%87Kw)なお、URIエンコードは「encodeURIComponent」のページで変換できます。チャート」のページでご覧になれます。次回は、これまでの内容を元に動的にグラフを作成しましょう。利用して、国を色分けした地図を作成しましょう。題材は、2011年のサッカー・アジアカップの出場16か国です。グループステージは、4グループに分けて争われます。それぞれのグループを4色で色分けしました。日本が属するのはBグループで、青色で表示しています。サウジアラビア、シリア、ヨルダンという中東でも西側の国と同一グループです。各グループ2位までが決勝トーナメントに出場できます。開催は2010年1月。日本の活躍を期待します。ついては、これまで次の記事を掲載してきました。「文字列を画像にする。「文字列に枠を付けた画像を作成する。「アイコン付の文字列画像を作成する。