テーブルからcssで直線グラフを描く方法

私はCSSを初めて使っています。ライブラリとフレームワークのないcssを使ってグラフを描く必要があります。誰もこのhtmlテーブルで線形グラフを描くのを助けてください。前もって感謝します。テーブルからcssで直線グラフを描く方法

<html> 
 
<head> TABLE TO GRAPH </head> 
 
<body> 
 
<table id ="graph" border="1"> 
 
<tr> 
 
<th> WEEK </th> 
 
<th> VISITORS </th> 
 
</tr> 
 
<tr> 
 
<td> 1 </td> 
 
<td> 20 </td> 
 
</tr> 
 
<tr> 
 
<td> 2 </td> 
 
<td> 40 </td> 
 
</tr> 
 
<tr> 
 
<td> 3 </td> 
 
<td> 60 </td> 
 
</tr><tr> 
 
<td> 4 </td> 
 
<td> 80 </td> 
 
</tr> 
 
</table></body> 
 
</html>

出典

2017-08-01 Raghavi

Javascriptがオプションでない場合は、非常にハックworakroundsがあるだろう、と私も –

は必ずあなたのされていないことを保証するものではありませんJavascriptを使える？個人的には、あなたの望む結果を得るためにJavascriptを使うことをおすすめします。 –

HTMLとCSSだけでは不可能です。 –

HTMLとCSSでライングラフを描画するために難しくなりますが、HTMLとCSSで棒グラフを描画することは比較的簡単であるだろう。

実施例：

.bar-chart { 
 
display: table; 
 
margin-top: 20px; 
 
} 
 

 
.row { 
 
display: table-row; 
 
} 
 

 
.row div { 
 
display: table-cell; 
 
width: 60px; 
 
height: 44px; 
 
border-right: 2px solid rgb(255, 255, 255); 
 
} 
 

 
.row .axis-y { 
 
width: 96px; 
 
border-right: 1px solid #000; 
 
vertical-align: top; 
 
} 
 

 
.axis-x div { 
 
border-top: 1px solid #000; 
 
} 
 

 
.axis-x .axis-y { 
 
border: none; 
 
} 
 

 
.axis-x div, .axis-y { 
 
text-align: center; 
 
font-weight: bold; 
 
} 
 

 
.row1 div:nth-of-type(n+2) { 
 
background-color: rgb(255, 0, 0); 
 
} 
 

 
.row2 div:nth-of-type(n+3) { 
 
background-color: rgb(255, 0, 0); 
 
} 
 

 
.row3 div:nth-of-type(n+4) { 
 
background-color: rgb(255, 0, 0); 
 
} 
 

 
.row4 div:nth-of-type(n+5) { 
 
background-color: rgb(255, 0, 0); 
 
}

<div class="bar-chart"> 
 
<div class="row row4"> 
 
<div class="axis-y">80 Visitors</div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
</div> 
 

 
<div class="row row3"> 
 
<div class="axis-y">60 Visitors</div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
</div> 
 

 
<div class="row row2"> 
 
<div class="axis-y">40 Visitors</div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
</div> 
 

 
<div class="row row1"> 
 
<div class="axis-y">20 Visitors</div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
</div> 
 

 
<div class="row axis-x"> 
 
<div class="axis-y"></div> 
 
<div>Week 1</div> 
 
<div>Week 2</div> 
 
<div>Week 3</div> 
 
<div>Week 4</div> 
 
</div> 
 
</div>

出典

2017-08-01 09:34:19 Rounin

ありがとう – Raghavi

テーブルからcssで直線グラフを描く方法

答えて

関連する問題