絶対まねしたい！Chart.jsを使ってフラットデザインぽいグラフを作る方法 | startapp

2013/07/22 529 users ドーナッツ セグメント startapp CSS 円弧

Chart.jsというのが流行っているみたいなので、もうちょっとフラット感がでないものか、カスタマイズに挑戦してみました。Chart.jsの使い方などは、LIGさんの記事を参考にしてください。 ドーナッツ これを何個か並べればかなりフラット感が出ますね。外側の青い部分のみをChart.jsで描画し、それ以外はCSSで調整しています。2つ目のセグメントを背景色で塗れば、円弧のように見えます。 ※ ド... 続きを読む

Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG

2013/07/17 274 users canvas ハルエ グラフ 株式会社LIG グラフツール

こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛... 続きを読む

使い勝手が良さそうなHTML5ベースのグラフ描画ライブラリ『Chart.js』 | IDEA*IDEA

2013/03/18 158 users IDEA グラフ描画ライブラリ 使い勝手 HTML5ベース

なんだか便利そうなのでメモ的にエントリー。HTML5というかCanvasを使ったグラフ描画ライブラリです。 ↑ 基本的なものから・・・。 ↑ こういったものまで6種類をサポート。 ↑ マークアップも素直な感じです。 Google Chart Toolsもいいですが、シンプルにローカルでごにょごにょというときもあるかと思いますので覚えておいてもいいですね。詳細＆ダウンロードは以下からどうぞ。 » C... 続きを読む

Chart.js | HTML5 Charts for your website.

2013/03/18 726 users

Easy, object orientated client side graphs for designers and developers DocumentationDownload 6 Chart types Visualise your data in different ways. Each of them animated, fully customisable and look gr... 続きを読む