chart.js 파이차트로 재질문입니다

chart.js 파이차트로 재질문입니다

QA

chart.js 파이차트로 재질문입니다

본문

파이차트, 도넛차트 바깥에 숫자를 써넣으려고 하는데..

anchor: 'end',

align: 'top',

이렇게 하면 바깥에 있긴 한데 가운데가 아니고

 

align: 'center로 설정하면 가운데는 맞는데 테두리에 걸쳐있네욤...

 

방법이 있을까요..?

 

추가로 차트가 회전되었으면 하는데.. 숫자는 회전이 안되서 아시는분 있으면 질문 드립니다 ㅠ

 

var options2 = {

    plugins: {

        datalabels: {

            display: function (context) {

                return context.dataset.data[context.dataIndex] > 0;

            },

            anchor: 'end',

            align: 'top',

            color: '#707070',

            font: {

                family: 'Pretendard',

                weight: '500',

                size: 14

            },

            formatter: function (value, context) {

                if (context.dataIndex === 0) {

                    return addCommas(value + "%");

                } else {

                    return '';

                }

            },

        },

    },

    responsive: true,

    maintainAspectRatio: false,

    layout: {

        padding: {

            top: 10,

            right: 10,

            left: 10,

            bottom: 10

        },

    },

};

 

var data4 = {

    datasets: [{

        data: [20, 80],

        backgroundColor: ['#7badf2', '#dcdcdc'],

        borderWidth: 0,

    }]

};

 

var ctx4 = document.getElementById('circleChart1').getContext('2d');

 

var myChart4 = new Chart(ctx4, {

    type: 'pie',

    data: data4,

    options: options2,

    plugins: [ChartDataLabels],

});

이 질문에 댓글 쓰기 :

답변 1

안녕하세요.

이 코드가 도움이 될지요~

 

var options2 = {
    plugins: {
        datalabels: {
            display: function (context) {
                return context.dataset.data[context.dataIndex] > 0;
            },
            anchor: 'end',
            align: 'top',
            offset: 10, // 라벨 위치 조절
            rotation: 270, // 라벨 회전
            color: '#707070',
            font: {
                family: 'Pretendard',
                weight: '500',
                size: 14
            },
            formatter: function (value, context) {
                if (context.dataIndex === 0) {
                    return addCommas(value + "%");
                } else {
                    return '';
                }
            },
        },
    },
    // 이하 생략...
}
 

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT