简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
도움 찾기: 위치에 따라 차트에 데이터 레이블을 영구적으로 표시하는 방법
P粉302160436
P粉302160436 2023-08-15 23:21:18
0
1
449
<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>
P粉302160436
P粉302160436

모든 응답(1)
P粉739706089
P粉7397060892023-08-16 21:44:17 1층

라벨용 컨테이너를 별도로 추가하고 차트 색상에 맞게 스타일을 지정했습니다. 저는 flexbox를 사용하여 차트 왼쪽에 레이블을 배치하고 있습니다. positionLabelsContainer() 함수는 차트 크기에 따라 레이블 컨테이너의 위치를 ​​지정하고 창 크기가 조정될 때 위치를 변경하기 위해 이벤트 리스너를 추가합니다.

으아악
좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！