Vue에서 Chart.js 4.2.1 데이터 레이블 스타일 변경
<p>Vue와 ChartJS를 사용하고 있는데 데이터 레이블의 스타일을 변경하고 싶습니다. </p>
<p>데이터 라벨이 3개 있는데 두 번째 라벨의 스타일을 보통에서 굵게 변경하고 싶습니다. </p>
<h2>내가 시도한 것 - 1</h2>
<pre class="brush:js;toolbar:false;">플러그인: {
전설: {
디스플레이: 거짓,
},
툴팁: {
활성화됨: 거짓,
},
데이터 라벨: {
포맷터: 함수(값, 컨텍스트) {
if (context.dataIndex === 1) {
var ctx = context.chart.ctx;
ctx.font = "굵게 20px 'Noto Sans Kr', sans-serif"
ctx.fillStyle = "#333";;
console.log(ctx.fontWeight);
}
반환 값 + "원";;
},
},
},
</pre>
<h2>내가 시도한 것 - 2</h2>
<pre class="brush:js;toolbar:false;">플러그인: {
전설: {
디스플레이: 거짓,
},
툴팁: {
활성화됨: 거짓,
},
데이터 라벨: {
포맷터: 함수(값, 컨텍스트) {
if (context.dataIndex === 1) {
반품 {
텍스트: 값,
스타일 : {
무게: '굵게'
}
}
}
반환 값 + "원";;
},
},
},
</pre>
<p>두 번째 방법에서 반환된 텍스트는 <strong>[object object]</strong>이므로 스타일링이 제대로 작동하는지 확인할 수 없습니다. </p>
<p>데이터베이스의 개별 스타일을 변경하는 데 도움을 주세요. </p>
