chartjs 관련

1 1
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.25
2.27
2.28
3.1
3.2
3.3
3.4
3.5
3.7
3.9
3.11
3.12
3.13
3.14
3.15
3.16
3.17
3.18
3.19
3.20
3.21
3.22
3.23
3.24
3.25
3.27
3.28
3.29
3.30
3.31
4.1
4.2
4.3
4.4
4.5
4.6