こんにちは！静岡県浜松市でホームページ制作をしているフリーランスWEBデザイナーのこたです。
コーポレートサイトにグラフを入れたいことがありませんか？
会社の業績やサービスの売り上げなど数字を表すのにグラフを入れる場面があると思います。
その場合に画像を作成することがありますが、画像ではなく動きをつけて表したいときがあります。
しかし、動きをつけるとするとJavaScriptやjQueryで実装するのですが、ある程度技術がないと実装できないのと、実装に工数がかかってしまうので、やめてしまうことが多いです。
そこで今回はJavaScriptやjQueryを使わないで簡単に実装できる方法をご紹介します。
chart.cssで簡単にグラフ作成
グラフやチャートを簡単に実装できるCSSのフレームワークが「chart.css」になります。
棒グラフや折れ線グラフなど12種類のグラフがコピペで簡単に作れるのが特徴で、Web制作初心者でも実装でき、コーポレートサイトやリクルートサイトで活躍します。
chart.cssの使い方
まず、本サイトより[chart.css]をダウンロードしてください。
<link rel="stylesheet" href="charts.min.css">または、CDNもあるのでダウンロードせずに使用することもできます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
対応種類は12種類
chart.cssを読み込んだら、あとは公式サイトにコピペできるコードがあります。
以下ではよく使われるグラフのデモを置いておきます。
一般的なグラフ
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.
横向きの棒グラフ
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.
縦向きの棒グラフ
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.
折れ線グラフ
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.
まとめ
いかがでしたか？
CSSのワイヤーフレームを読み込むだけで簡単に実装できるので、工数をあまりかけられない案件にも対応ができそうです。
また、Web制作初心者でも扱いやすいかつ、見栄えがすごくいいので、初心者にも重宝されると思います。
今回紹介したグラフを自社のWebサイトにも実装したいという方がいらっしゃいましたら、お気軽にご相談ください！
