単純な棒グラフを作成するための10個のCSSスニペット

Web上で簡単なCSS棒グラフを作成する方法をお探しですか？ このコレクションは、すべてCSSで設計された無料のオープンソース棒グラフでいっぱいなので、きっと役に立ちます。

これらのグラフのほとんどは、追加のCSSアニメーションとグラデーション効果を備えた強力なパンチを詰め込んでいます。 ただし、データの配置、サイズ、形状、およびデザインのスタイルを変更するものもいくつかあります。 洗練された棒グラフUIを探しているフロントエンド開発者に最適なコレクション。

1.データチャート

このセットには、美しくデザインされ、非常にうまく実行されたチャートがいくつかあります。 開発者のKrisOlszewskiは、生データ（この場合はプレースホルダー番号）を共有する各棒の上部とともに、これらの棒グラフのUXに主に焦点を当てました。

当然、すべてがCSSで実行されますが、これは確かに印象的です。 垂直バーと水平バー、および特定の値に基づいて背景色を変更できる階層型バーのテンプレートを備えています。

開発者が手に取ってカスタマイズするための非常に多様性を提供するので、簡単に私のお気に入りのセットの1つがそこにあります。

2.ポケモン棒グラフ

このデザインが実際のレイアウトで特に役立つとは言えませんが、確かに印象的です。

これらのポケモンスタイルのバーは、ウェブにクリエイティブなグラフデザインを提供します。 各バーは、個々のポケモンの目のベクトル要素とともに特定の配色に依存しています。

それぞれがホバーアニメーション効果を備えているため、必要なトランジションに合わせてスタイルを変更することもできます。 そして、これらの生き物を他の動物に変えたい場合は、色を変えてこの同じテンプレートに従うことができます。

3.アニメーショングラフ

棒グラフは、簡単に使用できるように視覚的なデータを表示するために使用されます。 これは、ビジュアルアイテムと生データの両方を含める必要があることを意味します。

これは、各バーの上部にパーセンテージラベルを使用したこのグラフで私が本当に気に入っていることの1つです。 凡例やX / Yラベルはありませんが、追加するのは難しいことではありません。

最も印象的な部分は、CSS全体がどのように実行されるかということだと思います。 CSSプロパティが原因で、アニメーションとパーセンテージテキストの両方が表示されます。 バカバカしく！

4.ミニマリストチャート

シンプルで使いやすいのは、ウェブを席巻するミニマリストの流行を最もよく表しています。 ミニマリズムは、レスポンシブWebサイトや、濃い配色を必要としない単純なレイアウトに最適です。

また、この棒グラフを使用すると、データのスタイルを変更して、任意の明るい色に合わせることができます。

任意の背景行を使用して測定値を示し、Y軸にラベルを追加してデータを明確にすることもできます。

5.純粋なCSSカラーバー

CSSグラデーションは、Webに多くのことを追加します。この棒グラフは、実際のグラデーションのもう1つの例にすぎません。

各バーはクラシックなWeb2.0グラデーションを使用しており、少し古風な感じがしますが、見た目は素晴らしいです。 デザイン全体がSassコードで機能し、変数を使用してアニメーションの遅延、バーのサイズ、グラフの高さの合計を設定します。

色を編集するには、Sass / SCSSを使用するか、CodePenを使用して生のCSSにコンパイルする必要があります。 しかし、それは過度に複雑なグラフではないので、これはそれほど問題にはならないはずです。

6.千鳥状の水平バー

線形アニメーションは、すぐに注目を集めるため、私のお気に入りの一部です。 このペンでは、各バーが次々に表示される線形アニメーションの例を見ることができます。

水平方向に設計されているため、バーは画面全体に読み込まれ、バーのグラフィック内にラベルが含まれます。 このように、合計の「スキルレベル」の測定値はX軸に従い、垂直方向にスキルを追加する余地があります。

私が見たよりきれいな棒グラフの1つであり、スキルベースのポートフォリオWebサイトで見事に機能します。

7.レスポンシブ棒グラフ

最新のWebサイトはすべて、すべてのデバイスに対応できるように応答性が高い必要があります。 しかし、一部の要素は他の要素よりも責任を負うのが困難です。

タブ、大きな表、グラフはすべて複雑な例です。 このレスポンシブグラフは、小さな画面を処理する優れた仕事をします。 合計サイズとバー間のスペースを超えて再配置されることはありません。

小さい画面では、バーのアイテムが窮屈でほとんど読めないように感じることがあります。 しかし、ほとんどの場合、このレスポンシブスタイルは素晴らしく、静的グラフの完全な代替品です。

8.毎日のCSSグラフ

開発者は、DailyCSSなどの課題でスキルをテストするのが好きです。 これにより、UIデザインの画像が毎日取得され、開発者にHTML / CSSで再作成するように求められます。

これらの多くはCodePenにありますが、このグラフは手付かずの例の1つです。

各バーにシンプルでクリーンなアニメーション効果を付けて設計されています。 言うまでもなく、どのWebサイトにも簡単に適応できるモノクロの配色に従います。

9.ヴィンベントリーチャート

もう1つのクールなDailyCSSの例は、CSSといくつかの巧妙なHTMLスキルを使用して作成されたこのブドウ園の在庫チャートです。

これは非常にユニークなアイデアであり、CSSのみを介して実行されることはさらに印象的です。 グラフの実際のデザインと、それがブラウザーで完全にレンダリングされる方法に最も感銘を受けました。

確かに、これはほとんどのWebサイトでは機能しませんが、最新のCSSで可能なことの証です。

10.CSSのみの水平スキル

オンラインでスキル測定の棒グラフをたくさん見つけることができますが、これはJedTrowによるものです。

完全に応答するように設計されており、どの画面でも問題なく動作します。 スマートフォンの場合、この棒グラフのサイズを320pxに変更できますが、それでも一貫性は保たれます。

さらに、このペンには、デモの下に小さなチュートリアルセクションがあり、すべてのソースコードとその動作を確認できます。 もちろん、CodePenのIDEからコピーして貼り付けることもできますが、開発者がプロ​​セスを分解するのを見るのは素晴らしいことです。

これらのグラフはすべてユニークなものを提供しますが、共通点が1つあります。それは、純粋なCSSコードの驚くべき使用法です。

あなたも好きかもしれません：検討する価値のある10のオープンソースJavaScriptデータチャートライブラリ。