이 페이지에는 차트를 인스턴스화하고 페이지에 그릴 수 있는 다양한 방법이 나와 있습니다. 각 방법에는 아래와 같은 장단점이 있습니다.
목차
chart.draw()
다음은 이 문서의 Hello Chart! 예시에서 설명하는 기본 메서드입니다. 기본 단계는 다음과 같습니다.
- gstatic 라이브러리 로더, Google 시각화, 차트 라이브러리 로드
- 데이터 준비
- 차트 옵션 준비
- 차트 클래스를 인스턴스화하여 페이지 컨테이너 요소에 핸들을 전달합니다.
- 원하는 경우 차트 이벤트를 수신하도록 등록합니다. 차트의 메서드를 호출하려면 'ready' 이벤트를 수신 대기해야 합니다.
chart.draw()를 호출하여 데이터와 옵션을 전달합니다.
장점:
- 프로세스의 모든 단계를 완벽하게 제어할 수 있습니다.
- 차트에서 발생한 모든 이벤트를 수신 대기하도록 등록할 수 있습니다.
단점:
- 상세
- 필요한 모든 차트 라이브러리를 명시적으로 로드해야 합니다.
- 쿼리를 전송하는 경우 콜백을 위해 수동으로 구현하고, 성공 여부를 확인하고, 반환된
DataTable를 추출하여 차트에 전달해야 합니다.
예:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var data;
var chart;
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create our data table.
data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
function selectHandler() {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' + value);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
ChartWrapper
ChartWrapper는 적절한 모든 차트 라이브러리를 자동으로 로드하고 차트 도구 데이터 소스에 대한 쿼리 전송도 간소화하는 편리한 클래스입니다.
장점:
- 훨씬 적은 코드
- 필요한 모든 차트 라이브러리를 자동으로 로드합니다.
Query객체를 만들고 콜백을 처리하여 데이터 소스를 훨씬 쉽게 쿼리할 수 있습니다.- 컨테이너 요소 ID를 전달하면 컨테이너 요소 ID에서 getElementByID를 자동으로 호출합니다.
- 데이터는 값 배열, JSON 리터럴 문자열,
DataTable핸들 등 다양한 형식으로 제출할 수 있습니다.
단점:
ChartWrapper는 현재 select, ready, error 이벤트만 전파합니다. 다른 이벤트를 가져오려면 래핑된 차트의 핸들을 가져오고 여기에서 이벤트를 구독해야 합니다. 예시는ChartWrapper문서를 참조하세요.
예:
다음은 로컬에서 구성된 데이터가 배열로 지정된 열 차트의 예입니다. 배열 문법을 사용하여 차트 라벨이나 날짜/시간 값을 지정할 수는 없지만 이러한 값으로 DataTable 객체를 수동으로 만들어 dataTable 속성에 전달할 수 있습니다.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
['', 700, 300, 400, 500, 600, 800]],
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw();
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
다음은 Google 스프레드시트를 쿼리하여 데이터를 가져오는 선 차트의 예입니다. 코드는 콜백을 처리할 필요가 없습니다.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current');
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
query: 'SELECT A,D WHERE D > 100 ORDER BY D',
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw()
// No query callback handler needed!
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
자동 로드와 함께 사용하면 매우 간결한 코드를 만들 수 있습니다.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
query: 'SELECT A,D WHERE D > 100 ORDER BY D',
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw()
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
ChartWrapper와 함께 차트 편집기 사용
Google 스프레드시트에 내장된 차트 편집기 대화상자를 사용하여 차트를 디자인한 다음 차트를 나타내는 직렬화된 ChartWrapper 문자열을 요청할 수 있습니다. 그런 다음 이 문자열을 복사하여 붙여넣고 위의 ChartWrapper에 설명된 대로 사용할 수 있습니다.
자체 페이지에 차트 편집기를 삽입하고 사용자가 다른 데이터 소스에 연결하고 ChartWrapper 문자열을 반환하는 메서드를 노출할 수 있습니다. 자세한 내용은 ChartEditor 참조 문서를 확인하세요.
DrawChart()
DrawChart는 ChartWrapper를 래핑하는 전역 정적 메서드입니다.
장점:
ChartWrapper와 동일하지만 사용하기에 약간 더 짧습니다.
단점:
- 래퍼에 핸들을 반환하지 않으므로 어떤 이벤트도 처리할 수 없습니다.
<DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
google.visualization.drawChart({
"containerId": "visualization_div",
"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
"query":"SELECT A,D WHERE D > 100 ORDER BY D",
"refreshInterval": 5,
"chartType": "Table",
"options": {
"alternatingRowStyle": true,
"showRowNumber" : true
}
});
}
google.charts.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization_div" style="width: 600px; height: 400px;"></div>
</body>
</html>