본문 바로가기

퍼블리싱/jQeury, Javascript

막대그래프(unlimited value)

// 그래프보기 버튼 클릭시
$('.btn').on('click', function () {
    var wishNumArr = [32,15,0,2]; // 그래프값(실제로 노출될 값 순서대로 들어야야함)
    var maxNum;

    maxNum = getMaxOfArray(wishNumArr);
    function getMaxOfArray(numArr) {
        return Math.max.apply(null, numArr);
    }

    $('#popWishResult .graphArea li').each(function (i) {
        $(this).find('.bar').width(function () {
            return ((wishNumArr[i] / maxNum) * 100) + '%'; // 제일 큰 숫자를 100% 기준으로 삼고 계산함
        });
        $(this).find('.num > span').text(wishNumArr[i]);
    });
});

젹용된 예 )