logo image
메인
기술
HOME
기술

chartjs 관련

1 1
목록
#chartjs
chartjs 관련
현재 3.7.1 이 최신

datalabels 사용 시 
https://chartjs-plugin-datalabels.netlify.app/guide/labels.html#multiple-labels
를 추가해서 사용해야함
적용법 설명 문서 https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#registration 


<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script>
Chart.register(ChartDataLabels); //전역으로 플러그인 등록
</script>



<script>
    const data = {
        labels: <?=json_encode(array_keys($stats_sex)) ?>,
        datasets: [{
            label: '성별분포',
            data: <?=json_encode(array_values($stats_sex)) ?>,
            backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)'
            ],
            hoverOffset: 4
        }]
    };
    const config = {
        type: 'pie',
        data: data,
        options:{
            responsive: false,
            maintainAspectRatio: false,
            plugins:{
                datalabels: {
                    display: true,
                    color:"#000",
                    anchor: 'center',
                    align: 'center',
                }
            }
            // aspectRatio:1,
            
        }
    };
    const ctx = document.getElementById('canvas_sex');
    const chart_sex = new Chart(ctx,config);
</script>
목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
2.1
2.2
2.3
2.4
2.5
2.6
2.7
2.8
2.9
2.10
2.11
2.12
2.13
2.14
2.15
2.16
2.17
2.18
2.19
2.20
2.21
2.22
2.23
2.24
2.25
2.26
2.27
2.28
tag