google 图表（chart）
google 图表1
http://dl.iteye.com/upload/picture/pic/58251/a95ea9da-7c1c-3bfb-a3b8-41100ceddc35.png
<!--copyright (c) 2009 Google inc.You are free to copy and use this sample.License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Google Visualization API Sample</title><script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load('visualization', '1', {packages: ['geomap']}); function drawVisualization() { var data = new google.visualization.DataTable(); data.addRows(7); data.addColumn('string', 'Country'); data.addColumn('number', 'Popularity'); data.setValue(0, 0, 'Germany'); data.setValue(0, 1, 200); data.setValue(1, 0, 'United States'); data.setValue(1, 1, 300); data.setValue(2, 0, 'Brazil'); data.setValue(2, 1, 400); data.setValue(3, 0, 'Canada'); data.setValue(3, 1, 500); data.setValue(4, 0, 'France'); data.setValue(4, 1, 600); data.setValue(5, 0, 'RU'); data.setValue(5, 1, 700); data.setValue(6, 0, 'China'); data.setValue(6, 1, 900); var geomap = new google.visualization.GeoMap( document.getElementById('visualization')); geomap.draw(data, null); } google.setOnLoadCallback(drawVisualization);</script></head><body style="font-family: Arial;border: 0 none;"><div id="visualization" style="width: 800px; height: 400px;"></div></body></html>
google 图表2
http://dl.iteye.com/upload/picture/pic/58253/530dbd61-d870-3b0b-86aa-aa6d4ed68c17.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Google Visualization API Sample</title><script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load('visualization', '1', {packages: ['motionchart']}); function drawVisualization() { var data = new google.visualization.DataTable(); data.addRows(6); data.addColumn('string', 'Fruit'); data.addColumn('date', 'Date'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expenses'); data.addColumn('string', 'Location'); data.setValue(0, 0, 'Apples'); data.setValue(0, 1, new Date (1988,0,1)); data.setValue(0, 2, 1000); data.setValue(0, 3, 300); data.setValue(0, 4, 'East'); data.setValue(1, 0, 'Oranges'); data.setValue(1, 1, new Date (1988,0,1)); data.setValue(1, 2, 950); data.setValue(1, 3, 200); data.setValue(1, 4, 'West'); data.setValue(2, 0, 'Bananas'); data.setValue(2, 1, new Date (1988,0,1)); data.setValue(2, 2, 300); data.setValue(2, 3, 250); data.setValue(2, 4, 'West'); data.setValue(3, 0, 'Apples'); data.setValue(3, 1, new Date(1988,1,1)); data.setValue(3, 2, 1200); data.setValue(3, 3, 400); data.setValue(3, 4, "East"); data.setValue(4, 0, 'Oranges'); data.setValue(4, 1, new Date(1988,1,1)); data.setValue(4, 2, 900); data.setValue(4, 3, 150); data.setValue(4, 4, "West"); data.setValue(5, 0, 'Bananas'); data.setValue(5, 1, new Date(1988,1,1)); data.setValue(5, 2, 788); data.setValue(5, 3, 617); data.setValue(5, 4, "West"); var motionchart = new google.visualization.MotionChart( document.getElementById('visualization')); motionchart.draw(data, {'width': 800, 'height': 400}); } google.setOnLoadCallback(drawVisualization);</script></head><body style="font-family: Arial;border: 0 none;"><div id="visualization" style="width: 800px; height: 400px;">loading...</div></body></html>
http://code.google.com/apis/ajax/playground/
页:
[1]