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>