구글차트API를 이용한 그래프 사용
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
홈페이지에 그래프를 좀 멋있게 넣고 싶은데 너무 복잡하지 않고 쉽게 사용할 수 있고 좋은게 없을까? 하다가.. 사용해보게 되었다. 몇가지 코드값만 알면 쉽게 사용할 수 있다. 또한 마치 플래시 그래프 같은 효과도 있다. <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['corechart']}); </script> <script type="text/javascript"> function drawVisualization() { // Create and populate the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Search Engine'); data.addRows(8); data.setValue(0, 0, 'Yahoo Japan'); data.setValue(0, 1, 60); data.setValue(1, 0, 'Google Japan'); data.setValue(1, 1, 31.5); data.setValue(2, 0, 'Google'); data.setValue(2, 1, 5.9); data.setValue(3, 0, 'Biglobe'); data.setValue(3, 1, 1); data.setValue(4, 0, 'Goo'); data.setValue(4, 1, 0.7); data.setValue(5, 0, 'OCN'); data.setValue(5, 1, 0.5); data.setValue(6, 0, 'nifty'); data.setValue(6, 1, 0.2); data.setValue(6, 0, 'nifty'); data.setValue(6, 1, 0.2); data.setValue(7, 0, 'etc'); data.setValue(7, 1, 0.2); // Create and draw the visualization. new google.visualization.PieChart(document.getElementById('visualization')). draw(data, { width: 700, height: 300, is3D: true, tooltipTextStyle : {color: 'black'} , fontName:'Arial', fontSize:12, colors: ['#3366CC', '#DC3912', '#FF9900','#109618','#990099','#994990','#FFFF00'] }); } google.setOnLoadCallback(drawVisualization); </script> 그래프를 출력하고 싶은 곳에 하단 코드 삽입 <div id="visualization" style="width: 700px; height: 300px;"></div> 참고자료: http://code.google.com/intl/ko-KR/apis/chart/ http://code.google.com/apis/ajax/playground/?type=visualization#pie_chart |