차트에 배경색 및 텍스트 삽입

차트의 개체에 배경색을 지정하거나 텍스트를 삽입하고자 합니다.

클릭센스에서 기본적인 메뉴에는 개체에 배경색이나 텍스트를 삽입할 수 있는 기능은 없습니다.

이 글에서 소개하는 방법은 CSS를 이용하는 방법으로 난이도는 고급수준 입니다. 

 

Tid  는 Object ID

color라는 이름의 16진수 또는 CSS로 색상을 설정합니다.

 

[tid="WaKwB"] .qv-object-content {

background-color: #A17B39;

}

 

Object ID는 URL 뒤에 /options/developer 추가하여 시트를 열고 우스 오른쪽 클릭 -> Developer 선택하면 ObjectID를 찾을 수 있다. 

자세한 내용은  https://qliksense.tistory.com/140 에서 참조하세요.

차트에서

* 축의 레이블 및 제목 전환

* 가능한 경우 눈금선 전환

* 막대/선/마커 색상을 흰색으로 설정 (필요한 경우)

 

* SVG 인라인을 안전하게 만들려면 이 도구를 사용하십시오: https://yoksel.github.io/url-encoder/ (일부 chr를 교체해야 함).

다음 코드를 Multi KPI 차트에 CSS 로 삽입한 결과입니다.

 

[tid="XnVFJ"] .qv-object-content {

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext text-anchor='start' font-family='Arial' font-weight='bold' font-size='24' fill='white'%3E%3Ctspan dominant-baseline='central' text-anchor='middle' x='50%25' y='8%25'%3EQliker Background Color%3C/tspan%3E%3C/text%3E%3Ctext text-anchor='start' font-family='Arial' font-size='12' fill='white'%3E%3Ctspan dominant-baseline='central' text-anchor='middle' x='50%25' y='15%25'%3ECSS Code로 배경색 지정%3C/tspan%3E%3Ctspan dominant-baseline='central' text-anchor='middle' x='50%25' y='20%25'%3EQlik Sense는 Qliker%3C/tspan%3E%3C/text%3E%3C/svg%3E");

background-color: #A17B39;

background-repeat:no-repeat;

background-position: center;

}

 

[tid= "pPJpj"] .qv-object-content {

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext text-anchor='start' font-family='Arial' font-weight='bold' font-size='24' fill='white'%3E%3Ctspan dominant-baseline='central' text-anchor='middle' x='50%25' y='8%25'%3EQliker Background Color%3C/tspan%3E%3C/text%3E%3Ctext text-anchor='start' font-family='Arial' font-size='12' fill='white'%3E%3Ctspan dominant-baseline='central' text-anchor='middle' x='50%25' y='15%25'%3ECSS Code로 배경색 지정%3C/tspan%3E%3Ctspan dominant-baseline='central' text-anchor='middle' x='50%25' y='20%25'%3EQlik Sense는 Qliker%3C/tspan%3E%3C/text%3E%3C/svg%3E");

background-color: #4139A1;

background-repeat:no-repeat;

background-position: center;

}

[tid="bfxUN"] .qv-object-content {

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext text-anchor='start' font-family='Arial' font-weight='bold' font-size='24' fill='white'%3E%3Ctspan dominant-baseline='central' text-anchor='middle' x='50%25' y='8%25'%3EQliker Background Color%3C/tspan%3E%3C/text%3E%3C/svg%3E");

background-color: #ACDC94;

background-repeat:no-repeat;

background-position: center;

}

 

[tid= "pPJpj"] .qv-object-content {

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext text-anchor='start' font-family='Arial' font-weight='bold' font-size='24' fill='white'%3E%3Ctspan dominant-baseline='central' text-anchor='middle' x='50%25' y='5%25'%3EQliker Background Color%3C/tspan%3E%3C/text%3E%3Ctext text-anchor='start' font-family='Arial' font-size='12' fill='white'%3E%3Ctspan dominant-baseline='central' text-anchor='middle' x='50%25' y='15%25'%3ECSS Code로 배경색 지정%3C/tspan%3E%3Ctspan dominant-baseline='central' text-anchor='middle' x='50%25' y='20%25'%3EQlik Sense는 Qliker%3C/tspan%3E%3C/text%3E%3C/svg%3E");

background-color: #4139A1;

background-repeat:no-repeat;

background-position: center;

}

 

* 3행의 텍스트, x% y%는 위치,

* 위치 이미지: background-repeat:no-repeat; 배경 위치: 중앙;

* 전체 코드 예제는 Multi KPI > 모양 > 스타일 > 스타일(CSS)을 참조하십시오.

 

For more information

https://qliksense.tistory.com/

https://blog.naver.com/about_qlik

qliker@kakao.com

차트에 배경색 및 텍스트 삽입.pdf

0.16MB

Dev_차트에 배경색 및 텍스트 삽입.qvf

0.23MB