CSS 를 이용한 막대그래프

<div class="line_graph">
<div class="line1 line" style="width:12%">
<div class="line_body">
<div class="line_inner" style="height:70%;background: #91ce00;">
<div class="line_count" style="text-align: center;">6</div>
</div>

<div class="line_label">귤</div>
</div>
</div>

<div class="line2 line" style="width:12%">
<div class="line_body">
<div class="line_inner" style="height:30%;background: #fb6464;">
<div class="line_count" style="text-align: center;">3</div>
</div>

<div class="line_label">사과</div>
</div>
</div>

<div class="line3 line" style="width:12%">
<div class="line_body">
<div class="line_inner" style="height:50%;background: #ffe400;">
<div class="line_count" style="text-align: center;">5</div>
</div>

<div class="line_label">바나나</div>
</div>
</div>

<div class="line4 line" style="width:12%">
<div class="line_body">
<div class="line_inner" style="height:70%;background: #91ce00;">
<div class="line_count" style="text-align: center;">7</div>
</div>

<div class="line_label">키위</div>
</div>
</div>

<div class="line5 line" style="width:12%">
<div class="line_body">
<div class="line_inner" style="height:100%;background: #ff4c7a;">
<div class="line_count" style="text-align: center;">10</div>
</div>

<div class="line_label">딸기</div>
</div>
</div>
</div>

.line_graph {
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    height:160px;
    margin: 0 auto -20px auto;
    padding-left: 10px;
    width: 80%;
}

.line_graph .line {
    float: left;
    margin: 0 2%;
}

.line_graph .line .line_body{
    height: 160px;
    margin: 0 5px;
    position: relative;
}

.line_graph .line .line_inner{
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
}

.line_graph .line .line_inner .line_count{
    color: #fff;
    font-family: "Sandoll Boom 03 Bold", sans-serif;
    font-size: 20px;
    margin-top: 5px;
}

.line_graph .line .line_label{
    background: #fff;
    bottom: -20px;
    font-family: "Sandoll Bukkeureom 03 Bold", sans-serif;
    font-size: 12px;
    left: 0;
    padding-top: 5px;
    position: absolute;
    text-align: center;
    width: 100%;
}

막대를 추가하려는 경우
 html 에 아래 내용 추가 

<div class="line6 line" style="width:12%">
<div class="line_body">
<div class="line_inner" style="height:70%;background: #f0407a;">
<div class="line_count" style="text-align: center;">7</div>
</div>

<div class="line_label">오이</div>
</div>
</div>

1. <div class="line6 line" style="width:12%">  막대그래프의 갯수가 증가하면 폭을 줄여줘야 함
2. <div class="line_body"
3. <div class="line_inner" style="height:70%;background: #f0407a;"> 그래프 정보 수정
4. <div class="line_count" style="text-align: center;">7</div>
5. ...