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

835 SHARES

Chart.jsというのが流行っているみたいなので、もうちょっとフラット感がでないものか、カスタマイズに挑戦してみました。Chart.jsの使い方などは、LIGさんの記事を参考にしてください。

ドーナッツ

これを何個か並べればかなりフラット感が出ますね。外側の青い部分のみをChart.jsで描画し、それ以外はCSSで調整しています。2つ目のセグメントを背景色で塗れば、円弧のように見えます。

※ ドーナッツの幅は、percentageInnerCutout で調整できます。

ラインチャート

お次は棒グラフです。フラットに見せるポイントは、グラフや線などを簡略化することでイラストのように見せるところです。また、数字と組みあわせるとかっこ良く見えます。※ 数字の部分は、CSSで組んでいます。

※ 横軸のラベルは、意図的に減らしています。

バーチャート

棒グラフもフラットにしてみました。こちらも数字を使ってカッコよさを出しています。ポイントは、データ軸の数字をできるだけ少なくしシンプルに見せるとろこです。

グラフを使ったフラットデザイン

最後にグラフを上手に使ったフラットなデザインをDribbleからいくつか紹介します。フラットデザインにおいてグラフは、重要なアイキャッチとなる要素ですので、上手な使い方を研究してみるといいでしょう。

by Ben Garratt

By Agence Me

by Art Ramadani


by Cai Cardenas

by Leonardo Zakour

by Riki Tanone

by Piotr Kwiatkowski

by Gabe Abadilla


 

どれも、かっこいいですね。フラットデザインには欠かせないグラフの表現。みなさんも、いろいろ研究してかっこいいUIを作ってください!。


SHARE

友達にもシェアしよう

835


Discussion



Recent posts