html 게이지 차트 글씨 회전

Question

1번 사진의 0,25,50 을 오른쪽 처럼 회전 하여 수평으로 볼 수 있게 하고 싶습니다. staticLabels: { font: "15px sans-serif", // Specifies font labels: [0, 25, 50, 75, 100], // Print labels at these values color: "#000000", // Optional: Label text color fractionDigits: 0 // Optional: 소수점표시. 0 = round off위의 코드에서 해당 글씨 크기와 숫자를 변경하는걸 찾았고 검색하여 rotate를 삽입하면 그래프가 나오지가 않는 결함이 발생합니다. 선생님들 도와 주십시오 . ㅠㅠㅠ

훈련지원

92

스르르 · Answer

저 라이브러리를 살펴보니 텍스트가 캔버스 내부에 그려지고 있는데, 이런 경우 라이브러리 자체적으로 지원하지 않으면 텍스트만 회전시키기는 어렵습니다. 차라리 해당 기능을 오프하고, 직접 텍스트를 그리는게 더 빠르실거에요.https://codepen.io/wooknick/pen/OPLRwyO

scissors hand · Answer

guage.js 를 조금 수정해봤습니다.https://stackblitz.com/edit/stackblitz-starters-cidjxdq5?file=guage%2Fgauge.jsGauge.prototype.renderStaticLabels 함수를 수정했구요.원래는 canvas를 rotate 하는 부분을 sin, cos을 이용해 좌표를 계산하도록 변경했습니다. x, y 위치는 완벽하게 맞지는 않습니다. 필요하시면 조정해서 사용할 수 있습니다.그러나, 제일 좋은 것은 저 수정사항이 반드시 필요한 것인지 먼저 검토하는 것입니다.원본 라이브러리를 커스텀하게 변경해서 사용하는 것도 따로 관리가 필요하게 되니까요.

html 게이지 차트 글씨 회전

2개의 답변

기술 목록