개요
SVG 또는 VML을 사용하여 브라우저 내에서 렌더링되는 원형 차트 슬라이스를 클릭할 때 팁을 표시합니다. 범례 항목을 클릭하면 슬라이스에 애니메이션이 적용됩니다.
작성자: Google
예
시각화 플레이그라운드에서 직접 코딩
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
로드
google.load 패키지 이름은 "piechart"입니다.
google.load("visualization", "1", {packages: ["piechart"]});
시각화의 클래스 이름은 google.visualization.PieChart입니다.
var visualization = new google.visualization.PieChart(container);
데이터 형식
열 2개 첫 번째 열은 문자열이어야 하며 슬라이스 라벨을 포함해야 합니다. 두 번째 열은 숫자여야 하며 슬라이스 값을 포함해야 합니다.
구성 옵션
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| backgroundColor | 문자열 또는 객체 | 기본 색상 | 차트의 기본 영역의 배경 색상입니다.
다음 옵션 중 하나입니다.
|
| borderColor | 문자열 또는 객체 | 기본 색상 | 차트 요소 주위의 테두리 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다. |
| 색상 | 문자열 또는 객체의 배열 | 기본 색상 | 색상의 배열로, 각 요소는 한 계열의 색상을 지정합니다. 각 계열에 하나의 배열 요소를 지정해야 합니다.
|
| enableTooltip | boolean | true | true로 설정하면 사용자가 슬라이스를 클릭할 때 도움말이 표시됩니다. |
| focusBorderColor | 문자열 또는 객체 | 기본 색상 | 포커스가 있는 (마우스로 가리키는) 차트 요소 주변의 테두리입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다. |
| 키 | 숫자 | 컨테이너 높이 | 픽셀 단위의 차트 높이입니다. |
| 3D | boolean | false | true로 설정하면 3차원 차트를 표시합니다. |
| 범례 | 문자열 | '오른쪽' | 범례의 위치 및 유형입니다. 상태는 다음 중 하나일 수 있습니다.
|
| legendBackgroundColor | 문자열 또는 객체 | 기본 색상 | 차트 범례 영역의 배경 색상입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다. |
| legendFontSize | 숫자 | 자동 | 범례 글꼴의 크기입니다(단위: 픽셀). |
| legendTextColor | 문자열 또는 객체 | 기본 색상 | 범례 텍스트 색상입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다. |
| pieJoinAngle | 숫자 | 0 | 이 각도보다 작은 슬라이스는 '기타'라는 라벨이 지정된 일반 슬라이스로 결합됩니다. |
| pieMinimalAngle | 숫자 | 0 | 이 각도보다 작은 슬라이스는 원형 차트에 그려지지 않습니다. 하지만 범례 항목은 계속 표시됩니다. 나머지 슬라이스가 확장되어 파이를 고정된 비율로 채웁니다. 참고: 특히 이 숫자가 클 경우 파이에서 수량이 삭제되므로 겉보기 값이 왜곡될 수 있습니다. 슬라이스의 크기를 계산하기 위해 PiJoinAngle보다 작은 첫 번째 각도를 'Other' 슬라이스와 연결한 다음 PiminimumAngle보다 큰 모든 슬라이스를 그립니다. |
| title | 문자열 | 제목 없음 | 차트 위에 표시할 텍스트입니다. |
| titleColor | 문자열 또는 객체 | 기본 색상 | 차트 제목의 색상입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다. |
| titleFontSize | 숫자 | 자동 | 차트 제목의 글꼴 크기(픽셀)입니다. |
tooltipFontSize |
숫자 | 11 | 도움말 텍스트의 글꼴 크기입니다. 도움말이 너무 작아서 지정된 글꼴로 텍스트를 담을 수 없는 경우 글꼴 크기가 줄어들 수 있습니다. |
| tooltipHeight |
숫자 | 60 | 도움말의 높이입니다(단위: 픽셀). 도움말 높이는 고정되어 있으며, 텍스트의 길이나 글꼴 크기에 맞게 확장되거나 축소되지 않습니다. 하지만 차트 높이의 1/3보다 큰 값은 잘립니다. |
| tooltipWidth | 숫자 | 120 | 도움말의 너비(픽셀)입니다. 도움말 너비가 고정되어 있으며, 텍스트의 길이나 글꼴 크기에 맞게 확장되거나 축소되지 않습니다. 하지만 차트 너비보다 큰 값은 잘립니다. |
| 너비 | 숫자 | 컨테이너 너비 | 픽셀 단위의 차트 너비입니다. |
메서드
| 메서드 | 반환 유형 | 설명 |
|---|---|---|
draw(data, options) |
없음 | 차트를 그립니다. |
getSelection() |
선택 요소의 배열 | 표준 getSelection() 구현 선택된 요소는 행 및 셀 요소입니다. 사용자가 한 번에 여러 행 또는 단일 셀을 선택할 수 있습니다. |
setSelection() |
없음 | 표준 setSelection() 구현이지만 여러 행 또는 하나의 셀을 선택할 수 있습니다. 모든 선택 항목을 행 또는 셀 선택으로 처리합니다. |
이벤트
| 이름 | 설명 | 속성 |
|---|---|---|
onmouseover |
사용자가 슬라이스 위로 마우스를 가져가 해당 셀의 행과 열 색인을 전달하면 실행됩니다. | 행, 열 |
onmouseout |
사용자가 슬라이스에서 마우스를 이동하여 해당 셀의 행 및 열 색인을 전달하면 실행됩니다. | 행, 열 |
ready |
차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트의 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다. |
없음 |
select |
사용자가 슬라이스 또는 범례를 클릭하면 실행됩니다. 슬라이스를 선택하면 데이터 테이블의 해당 셀이 선택됩니다. 범례를 선택하면 데이터 테이블의 해당 열이 선택됩니다. 무엇이 선택되었는지 알아보려면 참고: 슬라이스를 클릭해도 셀 선택 및 선택 해제 간에 전환되지 않으며 슬라이스를 클릭하면 항상 셀이 선택됩니다. 반면 범례 항목을 클릭하면 행 선택 및 선택 해제 간에 전환됩니다. |
없음 |
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.