우선 전체적인 소스는 아래와 같습니다.
이를 사용하기 위해서, <script type="text/javascript" src="//www.google.com/jsapi"></script> 를 참조해서 구글 챠트를 자바스크립트로 구현할 예정입니다.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head runat="server"> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', { packages: ['corechart'] }); </script> <script type="text/javascript"> $(document).ready(function() { $.ajax({ type: 'POST', dataType: 'json', contentType: 'application/json', url: 'Default.aspx/GetData', data: '{}', success: function(response) { drawVisualization(response.d); } }); }) function drawVisualization(dataValues) { var data = new google.visualization.DataTable(); data.addColumn('string', 'Column Name'); data.addColumn('number', 'Column Value'); for (var i = 0; i < dataValues.length; i++) { data.addRow([dataValues[i].ColumnName, dataValues[i].Value]); } new google.visualization.PieChart(document.getElementById('visualization')). draw(data, { title: "Google Charts Example" }); } </script></head><body> <form id="form1" runat="server"> <div id="visualization" style="width: 600px; height: 400px;"></div> </form></body></html>
원차트를 사용하기 위해서... 'corechart' 를 명시합니다.
<script type="text/javascript"> google.load('visualization', '1', { packages: ['corechart'] });</script>
컬럼명과 퍼센트 표기에 대한 값을 담기 위해 클래스를 만듭니다.
여기서 컬럼명은 "ColumnName" 이고, 퍼센트 값은 "Value" 에 담을 예정입니다.
public class Data{ public string ColumnName = ""; public int Value = 0; public Data(string columnName, int value) { ColumnName = columnName; Value = value; }}
코드비하인드 단인, Default.aspx.cs 에서 GetData() 함수를 기술합니다.
자바스크립트단에서 값을 가져오기 위해, url: 'Default.aspx/GetData', 로 명시한 부분이 있습니다.
또한 접근하기 위해서 WebMethod 어트리뷰트를 명시합니다. (또한 웹서비스로도 구현이 가능합니다. 대신 url 부분 코딩은 다소 변경해야 합니다.)
위에 만든 클래스에서 객체를 4개 new 생성자를 통해 구현하여 제네릭 함수인 dataList 에 담아서 반환합니다.
이 값들이 원챠트에서 보여줄 컬럼명과 퍼센트 값을 의미합니다.
[WebMethod]public static List<Data> GetData(){ List<Data> dataList = new List<Data>(); dataList.Add(new Data("Column 1", 100)); dataList.Add(new Data("Column 2", 200)); dataList.Add(new Data("Column 3", 300)); dataList.Add(new Data("Column 4", 400)); return dataList; }
제네릭 dataList 를 값을 받기위해서 아래 처럼 url 을 기술하고, response.d 를 통해 값을 받아 drawVisualization 함수에 넘깁니다.
$(document).ready(function() { $.ajax({ type: 'POST', dataType: 'json', contentType: 'application/json', url: 'Default.aspx/GetData', data: '{}', success: function(response) { drawVisualization(response.d); } }); })})
넘긴 배열형식의 객체값을 받아 for 문으로 아래처럼 구현하여 data.addRow() 함수를 통해 추가합니다.
값은 addRow 함수를 통해 추가하고, 컬럼명은 addColumn 함수를 통해 명시합니다.
function drawVisualization(dataValues) { var data = new google.visualization.DataTable(); data.addColumn('string', 'Column Name'); data.addColumn('number', 'Column Value'); for (var i = 0; i < dataValues.length; i++) { data.addRow([dataValues[i].ColumnName, dataValues[i].Value]); } new google.visualization.PieChart(document.getElementById('visualization')). draw(data, { title: "Google Charts Example" }); }
이제 담은 data 변수에 draw 함수를 통해 데이터를 제공합니다. 원챠트를 그릴 것이므로 PieChart 를 호출합니다.
그리고 drow 함수 안의 title 부분의 값은 원챠트 상단의 타이틀을 의미합니다.
원문은 아래에 기술되어 있으니 참고하시기 바랍니다.
감사합니다.