SVG를 이용한 원형 차트에 텍스트 추가

과제  :  중앙에 문자가 있는 도우넛 차트를 만들고자 합니다.

 

해결하는 방법은 Inline SVG 이미지를 배경 이미지로 사용하는 차트입니다.

SVG는 매우 강력하며 모든 종류의 동적 이미지를 프로그래밍하는 데 사용할 수 있습니다. 이 예에는 두 개의 원과 중앙에 있는 텍스트가 있습니다. 여러 브라우저에서 테스트하세요

일부는 인코딩이 까다로우며 URI는 url에 안전하고 ansi여야 합니다.

 

SVG Example

='data:image/svg+xml,' &

'<circle cx="20" cy="20" r="15.9" stroke="Gainsboro" fill="transparent" stroke-width="5"/>' &

'<circle cx="20" cy="20" r="15.9" stroke="Green" fill="transparent" stroke-width="3.5" stroke-dashoffset="25" stroke-dasharray="' &

 

kpi% & ' ' & 100 - kpi%

 

& '"></circle>' &

'<text text-anchor="start" font-family="Open Sans" font-weight="bold" font-size="10" fill="black">' &

'<tspan dominant-baseline="central" text-anchor="middle" x="20" y="20">' & kpi% & '</tspan>' &

'</text>' &

'</svg>'

 

SVG 설명

반지름이 r = 15.9인 원주는 2 * pi * 15.9 = 99.9 ∼ 100과 같습니다.

stroke-dasharray="60 40", 여기서 60 - 대시 40 - 간격

양수 값인 stroke-dashoffset = 25는 선을 반시계 방향으로 1/4만큼 이동합니다.

기본 - stroke-dashoffset = 0 원은 90도, 즉 첫 번째 사분면의 x축에서 시작

작성방법

1.     맵 차트 작성

2.     영역 레이어 및 백그라운드 레이어 추가

 

1.     영역 레이어

위치 -> 위치 필드 수식 : ='[[[0,0],[0,40],[40,40],[40,0]]]'

 

1.     백그라운드 레이어

 

서식 : 이미지

URL :

='data:image/svg+xml,' &

'<circle cx="20" cy="20" r="15.9" stroke="Gainsboro" fill="transparent" stroke-width="5"/>' &

'<circle cx="20" cy="20" r="15.9" stroke="Green" fill="transparent" stroke-width="3.5" stroke-dashoffset="25" stroke-dasharray="' &

round(sum(Sales)/sum({1} Sales)*100)

& ' ' &

round(100-sum(Sales)/sum({1} Sales)*100)

& '"></circle>' &

'<text text-anchor="start" font-family="Open Sans" font-weight="bold" font-size="10" fill="black">' &

'<tspan dominant-baseline="central" text-anchor="middle" x="20" y="20">'

& num(sum(Sales)/sum({1} Sales),'0%') & '</tspan>' &

'</text>' &

'</svg>'

 

이미지 위치 :

위쪽(위도) : 40

왼쪽(경도) : 0

아래쪽(위도) : 0

오른쪽(경도) : 40

For more information

https://qliksense.tistory.com/

https://blog.naver.com/about_qlik

qliker@kakao.com

Qliker

 

SVG를 이용한 원형 차트에 텍스트 추가.pdf

0.19MB

Dev_SVG를 이용한 원형 차트에 텍스트 추가.qvf

0.23MB