HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css
Post on:2021年3月22日
sponsorsr
棒グラフや折れ線グラフ、どうやって実装していますか？
Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。
HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。
Charts.cssの特徴
Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。
- HTMLとCSSだけで実装
- セマンティックなHTMLタグを使用します。
- アクセシブル
- グラフやチャートを実装するHTMLは、アクセシブルです。
- カスタマイズ
- グラフやチャートは自由にスタイルできます。
- レスポンシブ
- スマホ、タブレット、デスクトップのさまざまなスクリーンに対応。
- バラエティ豊富
- グラフやチャートはさまざまなタイプが利用できます。
パイチャート・ドーナツチャートにも近日対応予定。
- オープンソース
- MITライセンスで、商用プロジェクトでも無料で利用できます。
Charts.cssのデモ
デモではCharts.cssで作成できるさまざまなグラフやチャートを楽しめます。
Charts.cssの使い方
Step 1: 外部ファイル
当CSSを外部ファイルとして記述します。
外部ファイル
1 | <linkrel="stylesheet"href="charts.min.css"> |
CDNでも提供されています。
外部ファイル
1 | <linkrel="stylesheet"href="https://unpkg.com/charts.css/dist/charts.min.css"> |
Step 2: HTML
グラフやチャートに使用するデータは、tableタグで実装します。これにより、検索エンジンやスクリーンリーダーには生データが参照されます。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <table> <caption>2016SummerOlympicsMedalTable</caption> <thead> <tr> <thscope="col">Country</th> <thscope="col">Gold</th> <thscope="col">Silver</th> <thscope="col">Bronze</th> </tr> </thead> <tbody> <tr> <thscope="row">USA</th> <td>46</td> <td>37</td> <td>38</td> </tr> <tr> <thscope="row">GBR</th> <td>27</td> <td>23</td> <td>17</td> </tr> <tr> <thscope="row">CHN</th> <td>26</td> <td>18</td> <td>26</td> </tr> </tbody> </table> |
Step 3: classの付与
tableタグに.charts-cssを加え、使用するグラフやチャートの種類（.bar,.column,.lineなど）を加えます。
classの付与
1 2 3 | <tableclass="charts-css bar"> ... </table> |
あとは、チャートの可視性を高めるために多くのユーティリティクラスが用意されています。詳しくは、下記のドキュメントをご覧ください。
簡単に作成できるようにオンラインツールも用意されています。
オプションをいろいろ試すことができ、下記のようにリアルタイムに確認できます。
sponsors
Related Posts
Recnet Entry
- 表現が美しい日本語を学べる！ 言葉のイメージにあったイラストで和文化を堪能できる雑学教養本 -和のなるほど図鑑
- 記号文字を多用するプログラミング向け等幅フォント！ 記号文字が美しいバランスで、より見やすくデザインされている -Myna
- 2025年、Web制作者がチェックしておきたいCSSの新機能のまとめ: カスタマイズ可能な新しいコンポーネント編
- Kindle本のクリスマスセールが開催！ 人気のデザイン書、タイポグラフィ、絵師さん向けのイラスト書などがお買い得です
- デザインにおいてクライアントからのヒアリングに注目した、これまでになかった実践的な解説書 -デザインはヒアリングからはじまる
- 2025年、日本語の新作フリーフォントのまとめ！ 今年も新しいフリーフォントがたくさんリリースされました
- ネタバレのテキストを非表示にする、美しいパーティクルアニメーションを備えた高速で軽量なコンポーネント -spoilerjs
- モーダルが開いている間、その下のページが連鎖してスクロールしてしまうのを回避するCSSの新しいテクニック
Pickup Entry
- 2025年用、日本語のフリーフォント767種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
- 手書きの日本語フリーフォント、筆文字・毛筆の日本語フリーフォントの総まとめ
- ピクセルフォント・ビットマップ・電卓数字の日本語フリーフォント 総まとめ
- おしゃれな手書き！ 筆記体の英語フリーフォントの総まとめ
- 商用利用無料、国内のフリーイラスト素材の総まとめ
- 商用利用無料、おしゃれでシンプルなかわいい海外のフリーイラスト素材の総まとめ
- フォント名を画像から調べる、日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ
- いい感じの写真画像がクレジット表記無しで無料利用できるサイトのまとめ
- 背景素材に困った時に！ダウンロードしておきたい実用度満点のフリーの背景素材のまとめ
- 2025年のトレンドカラーは温かみのある極上の茶色「モカムース（Mocha Mousse）」
- 色々な色の名前、伝統色の名前が分かるサイトのまとめ
- VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptなどのコードを書く時に便利
- 最近の実装に合わせたHTMLテンプレート
- 5分で完璧に分かる！CSS Gridの基本的な使い方を解説
- 独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル
- CSS Flexbox の各プロパティの使い方を詳しく解説
- CSS Flexboxの使い方・バグ情報・グリッドの実装など、有用なリソースのまとめ
- CSSの中央揃えで、最も万能で信頼できる実装テクニック
- 2025年、現在の環境に適したリセットCSSのまとめ
- 2024年版、CSSフレームワークのまとめ
- Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ
- Font Awesome アイコンの使い方と便利な機能のまとめ
- Photoshopの新機能がかなり便利！かゆいところに手が届く改善点が盛りだくさん
- Photoshopの選択範囲や切り抜きはこれが一番簡単で正確！CC 2021で進化した選択範囲とマスクの作成
- 2025年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
- ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
- フォントやタイポグラフィの知識・テクニックを学ぶまとめ
- レスポンシブ対応のWordPressのテーマファイルのまとめ
- プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる
- 写真がもっと楽しくなる！写真画像をワンランク上に仕上げるPhotoshopのアクションのまとめ
- 黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
- 黄金比をサイトのデザインに取り入れる簡単な３つの方法
- フェルメールやゴッホ、北斎など西洋・日本の名画を楽しめるサイト集
- 美しい日本語を使いたい、ワンランク上のビジネスメールの作法
- 著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと
Category
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。