これらのグラフ、図の視覚化は、主にフラッシュといくつかのプログラミング言語を使用して解決されます。 これらが唯一の方法ですか？ CSSを使用してこのタスクを実装してみましょう。
まえがき
この例では、JavaScriptも他の言語も使用しません。 必要なのは、適切なマークアップとCSSコードだけです。
したがって、私たちの目標は、表データをグラフで表示することです。 チャートデータは、互いに直接依存する2つの要素のオブジェクトであることに注意してください。 したがって、構造とセマンティクスに関する最善の決定は、定義リストを使用することです。
なんで？ まず、これはアイテムのリストです。 リストは線形ですが、定義ヘッダー（dt要素）をX軸に沿ったポイントとして指定し、定義の説明（dd要素）をY値として指定できます。
そして、次のことを行います。
想像する
この形で
CSSコードを使用するだけ
実装
たとえば、過去12日間の期間と1日あたりのパフォーマンスビュー（稼働日の効率のようなもの）をパーセンテージで使用しました。 お気づきのように、6日目には、給与が支払われたので、その割合が最も高くなりました。
この場合の定義ヘッダーは、1から12の順番の日そのものになります
Day 1
定義の説明は、私の効率の値（％）になります
36
dd要素内に、span要素とem要素も追加します。 構造を変更するためではなく、スタイルを操作するのに十分な要素を持つためです。 また、要素にクラスを割り当て、さらに設計します。
したがって、定義の説明は次のようになります。
80
CSSを直接実行できるようになりました
定義リストの内容はダイアグラム（列）の要素なので、背景画像を割り当て、ダイアグラムのブロックが許す限り列の幅と高さを決定します。 また、すべてのインデント値をデフォルトにリセットする必要があります。
dl#csschart, dl#csschart dt, dl#csschart dd{
margin:0;
padding:0;
}
dl#csschart{
background:url(bg_chart.gif) no-repeat 0 0;
width:467px;
height:385px;
}
定義ヘッダーには視覚的な表示目的がないため、非表示にします。
dl#csschart dt{
display:none;
}
私たちは、デノウメントに近づいています。 定義の説明要素には、spanとemの2つの子要素が含まれていることを思い出してください。 これにより、3つの要素を一度に処理できます。
背景画像が繰り返される高さと幅に適切なパディングを設定します。 要素が1行に揃うように、スナップを左に設定します。
dl#csschart dd{
position:relative;
float:left;
display:inline;
width:33px;
height:330px;
margin-top:22px;
}
dl#csschart dd.first{
margin-left:33px;
}
span要素は列のコンテンツであり、em要素は値を含む列の中央の正方形になります。 スパンについては、絶対配置プロパティを設定し、列が「成長」するように下部にスナップします。
dl#csschart span{
position:absolute;
display:block;
width:33px;
bottom:0;
left:0;
z-index:1;
color:#555;
text-decoration:none;
}
dl#csschart span em{
display:block;
font-style:normal;
float:left;
line-height:200%;
background:#fff;
color:#555;
border:1px solid #b1b1b1;
position:absolute;
top:50%;
left:3px;
text-align:center;
width:23px;
}
概略的には、これは次のように表すことができます。
それでは、要素の高さの正確な値をどのようにして知るのでしょうか？
span要素でこれを実装し、その高さを％で示します。 上記のコードで説明したように、span要素には2つのクラスがあります。 それらの最初は、そのタイプ（type1-type4）を決定します。 私の場合、これは異なる色を識別するために行われます。 2番目のクラス（p0-p100）は、列の高さを担当します。
dl#csschart span.p0{height:0%;}
dl#csschart span.p1{height:1%;}
dl#csschart span.p2{height:2%;}
.
.
.
dl#csschart span.p100{height:100%;}
値を挿入する前に、次のようにspan要素に必要なすべてのクラスを割り当てる必要があります。
80
まあ、それは全体のトリックです。
もちろん、マークアップはプログラムすることができ、手動で入力することはできません-それはすべてタスクに依存します。
このすべてをリアルタイムで見るか、アーカイブをダウンロードできます 。