CSSグラフ、チャートなどによるデータの視覚化

優れたデータ表示は、Web業界で重要な側面です。ビジターに数秒以内にあなたのコンテンツを理解させることが鍵となるからです。. あなたの訪問者があなたのWebコンテンツをより簡単に、またはより早く理解するほど、プレゼンテーションの取り扱いにおけるあなたの専門性をより反映します。. きちんとしたデータ表示の基準は、単純で記述的、詳細であるが、ユーザーの興味を維持するために管理され、内容の要約に汗をかくことがなく、比較に便利です。これらの非常識な基準が聞こえるかもしれない限り難しいです、それは可能です.

本日の投稿では、私たちはあなたを美しい美しさへの様々なアプローチのための乗り物に連れて行きたいのです。 完全にCSS / HTMLに基づいている創造的なデータ視覚化ツール. はい コピーして貼り付けるだけで、好みに合わせてカスタマイズできます。これらのグラフは、水平/垂直形式でデータを表示するCSS棒グラフ、データを整理するためのドロップダウンリスト、さらには折れ線グラフや円グラフにすることができます。!

あなたはもっと欲しい？スクロールし続ける!

横棒グラフ

CSSを使用してこのアクセシブルな棒グラフを使用して統計図を概要として表示する簡単な方法。バーは使用される値セルとラベルを計算します。音声テキストクラスを使用して使用されるテーブルヘッダ

CSSplay

棒グラフは、各行にスタイルとクラスが定義された決定的なリストです。最初のチャートには、2番目のチャートで修正された値が100％に近づくと発生するエラーがあります。参照用に含まれているソースコード.

パーセント棒グラフ

このチュートリアルでは、CSSのパーセント幅機能を使用して、パーセントベースの棒グラフを作成します。水平棒グラフでは、マーカーを設定して長さを左から右に移動するか、同じ手法を使用して複数回複製することによって縦グラフを作成できます。

マックスデザイン

Russ Weakleyは、パーセンテージと背景画像を使ってグラフを作成することを教えています。リンクされたコードと画像をコピーしてダウンロードしてプロジェクトで使用することができます.

縦棒グラフ

CSSとPHPを使用して、個々の棒の高さ（ピクセル単位）、棒グループのy軸、およびデータセットをスタイルするクラスを含む単純なリストを作成して、垂直棒グラフを作成します。 Eric Meyerは、同じテクニックを使用して、これを棒グラフ、折れ線グラフ、点グラフ、3Dグラフに変換する方法を教えています。

ピュアCSSライングラフ

折れ線グラフは、数値のある表よりもはるかに速く情報を配信します。 HTMLを使用してCSSで折れ線グラフを作成し、テキストを画像に置き換え、CSSスプライトと絶対位置を使用して折れ線グラフを取得する方法を学ぶ.

単純折れ線グラフ

DHTMLとCSSのみを使用し、グラフの透明な背景を設定できる非常に単純な折れ線グラフ。このグラフは速くロードされ、ページの他の部分と混ざります。.

Mgraph

このAjaxグラフは、CSSとXHTMLのみを使用して毎月の年間のデータを表すために使用され、FirefoxとOperaで実行されます。

複数列リスト

この記事では、Paul NovitskiがCSSを使用して複数列リストを作成することを説明しています。スプリットリストのフローティング、HTML属性、CSS生成コンテンツによる番号付け、XHTML、CSSなどによるリストのラッピングなど、マルチコラムリストを実現するための多数のテクニックについて説明し、最後にマルチスタイルを実現するための小さなスタイルと背景イメージを追加します。完全にリストする.

箇条書き

箇条書きグラフは、単一の数値データを1つ以上の他の数値データと比較し、定性的なパフォーマンス範囲を表示します。それらはデータ駆動型サイトにはかなり柔軟です。 CSS / HTMLを使用して弾丸グラフを作成する方法を学ぶ.

縦棒グラフ

縦棒グラフはCSSを使用して作成され、値は指定された値に従ってさまざまな高さに達する色付きの縦棒で表示されます。値はここに直接表示されるため、このグラフからすぐに明確なアイデアが得られます。 CSSセレクタ、スプライト、リストのスタイリングなどを使って、チュートリアルから縦棒グラフを作成することを学びます.

ダウンタイムグラフ

ダウンタイムグラフは当初、限られた画面領域に長い時間間隔を表示し、イベントの透過的なレイアウトを維持するという問題を抱えていました。これは毎月のカレンダーパラダイムによって明らかにされました。 onMouseOver（）は実行されたままで、さまざまな種類のダウンタイムイベントにさまざまな色が使用されます.

動的ライブCSSグラフ

Webサーバーによって実行されたpingの応答時間を表示するライブ動的CSSグラフは、CSSおよびJavaScriptコード、AJAX関数、およびグラフスライディングを使用してWebサーバーからデータを読み取ります。.

横棒グラフ

棒グラフは常に垂直である必要はありません。水平棒グラフも作成できます。この記事では、クラス 'horizo​​ntal graph'を使用し、CSSを使用してマークアップからグラフの高さを指定して、色のバリエーションが異なる水平棒グラフを作成します。.

マルチグラフ

画像のテーブルを使用しない折れ線グラフは、CSSとDHTMLを使用して作成されます。ロード速度が速く、背景は透明に変更できます。.

生産計画グラフ

生産計画グラフは、グラフコンテナとしてグラフクラスを使用して作成され、区切り線の描画にはhLineもvLineを使用します。このグラフはイントラネットアプリケーションで使用されます。グラフの幅は、表示された日数と身長に基づいて、ジョブ変更数を使用して計算されます。.

サンドイッチグラフ

サンドイッチグラフは、棒グラフ内の1本の棒が多数のレイヤーに分割され、1列の高さがグローバルトレンドを示すのに対して、単一レイヤーの高さがこのレイヤーの一部を示す場合に作成されます。このチュートリアルからCSSサンドイッチグラフを作成する.

積み上げ棒グラフ

積み上げグラフの場合は、定義リストを使用してデータを表示します。その後、マージンとパディングはすべてのブラウザで同じように表示されるようにリセットされます。積み重ねられた棒を得るために、軸が追加され、様式化されます。このチュートリアルでは、それぞれの細部について正確に説明しています。.

単純棒グラフ

CSSとPHPを使用して作成された棒グラフで、グラフィックライブラリを使用せずに、余白の計算に使用されていません。単に使ったテクニックを理解するのをかなり簡単にするパディング