도움 찾기: 위치에 따라 차트에 데이터 레이블을 영구적으로 표시하는 방법
P粉302160436
2023-08-15 23:21:18
<p>이러한 데이터 레이블을 차트에 영구적으로 표시하여 마우스 오버 시뿐만 아니라 항상 표시되도록 하고 싶습니다. 누구든지 나를 도와줄 수 있나요? [여기에 이와 비슷한 예가 있습니다.] 저도 코드를 적어두었습니다.
(https://i.stack.imgur.com/TY8X1.png)</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html><html lang="en">
<머리>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"><제목>원형 차트 예</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</머리>
<본문>
<div style="위치: 상대;">
<canvas id="pieChart" width="400" height="400"></canvas>
</div>
<스크립트>
// 캔버스 요소를 가져옵니다.
var canvas = document.getElementById('pieChart');
//파이 차트 생성
var PieChart = 새 차트(캔버스, {
유형: '파이',
데이터: {
라벨: ['온라인', '오프라인'],
데이터세트: [{
데이터: [8, 2],
backgroundColor: ['rgba(71, 190, 125, 1)', 'rgba(241, 65, 108, 1)'],
국경 폭: 0
}]
},
옵션: {
반응형: 사실,
유지AspectRatio: 거짓,
플러그인: {
전설: {
표시: 거짓
},
데이터 라벨: {
색상: '#fff',
앵커: 'end', // 데이터 라벨의 위치(시작, 중앙, 끝)
align: 'end', // 텍스트 정렬(시작, 가운데, 끝)
offset: 10, // 라벨과 차트 사이의 오프셋
포맷터: (값, ctx) =>
let label = ctx.chart.data.labels[ctx.dataIndex];
반환 라벨 + ': ' + 값 + '%';
}
}
}
}
});
</스크립트>
</body>
</html></pre>
<p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
라벨용 컨테이너를 별도로 추가하고 차트 색상에 맞게 스타일을 지정했습니다. 저는 flexbox를 사용하여 차트 왼쪽에 레이블을 배치하고 있습니다. positionLabelsContainer() 함수는 차트 크기에 따라 레이블 컨테이너의 위치를 지정하고 창 크기가 조정될 때 위치를 변경하기 위해 이벤트 리스너를 추가합니다.