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}}
    -
목록형 📅 달력형