IT박스

Google 차트 (JS)-차트에 투명한 배경을 사용하는 방법이 있습니까?

itboxs 2020. 11. 23. 07:54
반응형

Google 차트 (JS)-차트에 투명한 배경을 사용하는 방법이 있습니까?


작업중인 웹 앱에 다양한 그래프를 포함하기 위해 Google Charts API사용 하고 있습니다. 이미지 차트 도구가 아닌 자바 스크립트 차트 도구 를 사용하고 있는데 차트에 투명한 배경을 사용할 수 있는지 궁금합니다 (예 : 선 그래프, 파이 차트 등)?


차트의 구성 옵션에서 다음을 지정합니다.

backgroundColor: { fill:'transparent' }

이것은 Chrome과 Firefox에서 저에게 효과적이었습니다. 알아내는 데 시간이 좀 걸렸습니다 . 문서 페이지 만 HTML 색상 문자열에 넣을 수 있습니다 내가 '투명'이 그 중 하나 아니 었 가정 말한다.


Google 차트에 대한 투명한 배경 설정 :

// Set chart options
var options = {'title':'Chart Title',
'width':600,
'height':300,
'backgroundColor': 'transparent',
'is3D':true
};

JSFIDDLE 데모


backgroundColor : "00000000"이 저에게 효과적이었습니다.


아무것도 작동하지 않으면 drawChart () 함수 끝에 배경 사각형을 찾고 fill-opacity 속성을 추가하십시오.

 fill-opacity="0.0"

예:

$('#mychart').find('svg rect:eq( 1 )').attr('fill-opacity','0.0');

eq :() 선택기를 사용하여 투명하게 만들 사각형을 선택합니다.


카트 왼쪽에 드롭 다운 화살표가 있습니다. 클릭하고 "경찰 차트"로 이동합니다.

차트를 붙여 넣을 때 여전히 연결하도록 선택할 수 있으며 배경이 투명하게 붙여 넣어집니다.

참고 URL : https://stackoverflow.com/questions/7413508/google-charts-js-is-there-a-way-of-using-a-transparent-background-on-a-chart

반응형