하드코딩 chart(js) / 그라데이션(css)

chart.js를 사용하면 되는데 안쓴다고 하여 간단하게 작업한 내용을 기록해 보겠습니다.

 

HTML

<div class="chart-wrap">
    <div class="chart-sec origin-rate-plan">
      <div class="chart-desc">
        <p class="storage-desc">기본</p>
        <p class="storage">24</p>
      </div>
      <div class="chart-box" aria-hidden="true">
        <!-- 스크립트 참고 -->
        <div class="chart-bar" data-height="90"></div>
      </div>
    </div>
</div>

 

CSS

/* chart */
.chart-wrap {
    padding: 5px;
    display: flex;
    font-size: 12px;
}
.chart-wrap .chart-sec .chart-desc > p {margin: 0;}
.chart-wrap .chart-sec .chart-box .chart-bar {
    min-height: 12px;
    width: 70px;
    border-radius: 6px;
    margin: 0 auto;
    background: linear-gradient(to top, #6352ff 0%, #6b95ff 100%);
}

 

JS

//차트 퍼센트 비율 구하기
$(function () {
  var minHt = 12;
  var baseHt = 90;
  $(".chart-bar").each(function () {
    var setHt = (baseHt * $(this).attr("data-height")) / 100;
    $(this).css("height", setHt);
  });
});