2012年02月13日12時00分

HTML5で4種類のクールなグラフを作成できる Chartsで遊ぼう!!

  • この記事をはてなブックマークに追加
  • Pocket

『Charts』(関連サイト)はデータを入力するだけで“円グラフ”、“棒グラフ”、“折れ線グラフ”、“マトリックスグラフ”の4種類の美しいグラフを作成できるHTML5で開発されたウェブサービスだ。作成したグラフは“iFrame”タグを使って自分のサイトに埋め込んで使える。

Charts

■Twitterアカウントでログイン可能
 利用するにはTwitterのアカウントを使ってログインする必要がある。『Charts』のウェブサイト(関連リンク)にアクセスし、Chartsの【Start Today!】ボタンをクリックしよう。

Charts

 次に【Sign in with Twitter】を選択し、Twitterアカウントを入力。【連携アプリを認証】ボタンをクリックする。これで利用準備は完了だ。将来的にはFacebookのアカウントでも利用できるようだ。

Charts Charts

■棒グラフを作成してみよう
 4種類のグラフの中から、シンプルな棒グラフを作成してみよう。【New Chart】ボタンをクリックすると4つのグラフが表示されるので、その中から【Bar】を選択。

Charts Charts

 次に【Edit data】ボタンをクリックすると、データ入力画面が現われる。すでにサンプルデータが入力されているので、ここにデータを上書きしてみよう。また、画面右上の【Import Data】ボタンを押して『エクセル』などのデータをインポートできる。

Charts Charts

 上書きしたデータ。日本語の表示も問題ない。画面左側の【Preview】ボタンをクリックするとグラフを見られる。

Charts Charts

●作成した縦棒グラフ

Charts

【Setting】ボタンを押すと“Setteing”ウインドーが表示され、グラフの幅(Width)と高さ(Height)を調整したり、レイアウトの縦(Vertical)と横(Horizontal)を選択できる。

Charts Charts

●作成した横棒グラフ

Charts

 また、【Design】ボタンではグラフと背景の色をカラーパレットから選択できる。

Charts Charts

■作成したグラフをブログに使用する
【Embed】ボタンを押すと表示されるソースコードをコピー・アンド・ペーストするだけで、作成したグラフをブログなどで使用できる。

Charts Charts

 ブログ記事に作成したグラフを挿入。HTMLタグでの記述をサポートしているブログサービスを使う必要がある。

Charts

■その他のグラフ
 そのほかに作成できる3種類のグラフを見てみよう。どれもアニメーションを取り入れた、シンプルで見やすいデザインになっている。もちろん色やサイズを変更可能だ。

【Pie】を選択すると円グラフを作成できる。

Charts Charts

【Line】を選択すると折れ線グラフを作成できる。

Charts Charts

【Matrix】を選択すると、人型のアイコンを使ったマトリックスグラフを作成できる。

Charts Charts

【My Libraly】からは以前作成したグラフを呼び出し、再編集できる。

Charts

■話題のインフォグラフィックもつくれるように!
 このサイトでは、最近話題になっている情報やデータを見やすい画像で表現する“インフォグラフィック”を作成するツールも近日提供されるようだ。こまめにサイトの更新をチェックしておきたい。

Charts Charts

Charts(関連サイト)
フリーソフト
作者: Infogr.am

関連記事

あわせて読みたい

最新のニュース

アスキーストア人気ランキング

特集

Comic

アクセスランキング

Like Ranking