barxy 차트를 만드는 방법 html과 css로만 작성

Question

나는 많은 레코드를 가진 데이터베이스를 가지고 있으며 모든 데이터를 얻기 위해 foreach 루프를 만들어야한다. 문제는 모든 데이터에 대한 차트가 페이지를 오버로드한다는 것입니다. 그래서 두 개의 div와 하나의 div (파란색 하나)를 사용하여 막대 그래프를 작성하여 해당 데이터의 값에 따라 주요 div (회색 div)의 비율을 가져와야합니다. 나는 그 모든 일을했지만 내부 div를 변경하는 방법을 알지 못합니다. 데이터베이스의 가장 높은 값에서 얼마나 가까운 지에 따라 백분율 너비가 변경됩니다. 이것은 오른쪽에 표시된 숫자를 가져 오는 방법입니다.

<?php echo @$item->{"media_count"}; ?> 

내가 어떻게 보이게 할 수 있는지 이미지가 첨부됩니다. barlike chart

 <table class="table table-bordered"> 
     <tbody style="width: 401px; border: 0;"> 
     <?php foreach ($data->data->data as $key => $item): 
      if (@$item->{"name"}) { 
      ?> 
       <tr> 
        <td> 
         <?php echo @$item->{"name"}; ?> 
        </td> 
        <td> 
         <div class="outer"> 
          <div class="inner" style="width: 20%;"></div> 
         </div> 
        </td> 
        <td> 
         <?php echo @$item->{"media_count"}; ?> 
        </td> 
       </tr> 
     <?php } 
     endforeach ?> 
     </tbody> 
    </table> 

Answer 1

찾고있는 레이아웃입니까?

.outer, .inner { 
 
    height: 20px; 
 
    margin-bottom: 5px; 
 
} 
 

 
.outer { 
 
    background-color: gray; 
 
    width: 200px; 
 
} 
 

 
.inner { 
 
    background-color: blue; 
 
}

<div class="outer"> 
 
    <div class="inner" style="width: 20%;"></div> 
 
</div> 
 
<div class="outer"> 
 
    <div class="inner" style="width: 40%;"></div> 
 
</div> 
 
<div class="outer"> 
 
    <div class="inner" style="width: 60%;"></div> 
 
</div>

Answer 2

는, 전체 폭 DIV 만들기 높이와 너비를 설정하고 회색 색상. 그런 다음 해당 div 내에서 여백없이 다른 div를 만들고 높이를 설정하고 파란색으로 지정합니다. 파란색 div의 너비를 원하는 너비로 설정하십시오.

Answer 3

당신은 바 외부 사업부를 수행하기 위해 상대적으로 위치 DIV 내부의 막대에 대한 절대 위치를 사용할 수 있습니다.

.outerGraph { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: #fff; 
 
} 
 
.value { 
 
    position: absolute; 
 
    height: 20px; 
 
    right: 10px; 
 
} 
 
.bar { 
 
    position: absolute; 
 
    background-color: blue; 
 
    height: 20px; 
 
    left: 10px; 
 
} 
 
.bar1 { 
 
    top: 10px; 
 
} 
 
.bar2 { 
 
    top: 40px; 
 
} 
 
.bar3 { 
 
    top: 70px; 
 
}

<div class="outerGraph"> 
 
    <div class="bar bar1" style="width: 75px;" title="88204"></div> 
 
    <div class="value bar1">88204</div> 
 

 
    <div class="bar bar2" style="width: 100px;" title="92784"></div> 
 
    <div class="value bar2">92784</div> 
 

 
    <div class="bar bar3" style="width: 200px;" title="100000"></div> 
 
    <div class="value bar3">100000</div> 
 

 

 
</div>

는 호버 효과 막대에 title 속성을 사용 바, 자신의 번호를 모두 바 [] 클래스를 적용 할 수 있습니다.

정직하게 말하면, 나는 당신이 단지 자바 스크립트를 사용해서는 안되는 이유를 생각할 수 없다. 왜 당신이 이것을 원하고 자신의 코드를 게시해야하는지 우리에게 말해야합니다.