문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

===== Chart.js 라이브러리 : 데이터라벨 표시하기 =====
>CDN
<code java>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
</code>
\\
>Option
<code javascript>
var config = {
    options: {       // option - plugin에 datalabels옵션을 주면 모든 차트에 데이터라벨이 표시된다.           
        plugins: {
            datalabels: {
                display: true,
                color: '#FFFFFF'
		textStrokeColor: '#FFFFFF', 
		textStrokeWidth: 3,
		textShadowBlur: 30,
		textShadowColor: '#FFFFFF'
            }
        }
    },
    data: {          // data - datasets에 datalabels옵션을 주면 해당 dataset의 차트에만 데이터라벨이 표시된다.
        datasets: [{
            datalabels: {
                color: '#FFFFFF'
            }
        }]
    }
});
</code>
===== Ref =====
[[https://chartjs-plugin-datalabels.netlify.app/|chart.js-plugin-datalabels]]
\\
{{tag>eleven chart.js 라이브러리 데이터라벨}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구