书接上回：
maps-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.1', {packages: ['map']}); google.setOnLoadCallback(drawMap); function drawMap () { var data = new google.visualization.DataTable(); data.addColumn('string', 'Address'); data.addColumn('string', 'Location'); data.addColumn('string', 'Marker') data.addRows([ ['New York City NY, United States', 'New York', 'blue' ], ['Scranton PA, United States', 'Scranton', 'green'], ['Washington DC, United States', 'Washington', 'pink' ], ['Philadelphia PA, United States', 'Philly', 'green'], ['Pittsburgh PA, United States', 'Pittsburgh', 'green'], ['Buffalo NY, United States', 'Buffalo', 'blue' ], ['Baltimore MD, United States', 'Baltimore', 'pink' ], ['Albany NY, United States', 'Albany', 'blue' ], ['Allentown PA, United States', 'Allentown', 'green'] ]); var url = 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/'; var options = { zoomLevel: 6, showTip: true, useMapTypeControl: true, icons: { blue: { normal: url + 'Map-Marker-Ball-Azure-icon.png', selected: url + 'Map-Marker-Ball-Right-Azure-icon.png' }, green: { normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png', selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png' }, pink: { normal: url + 'Map-Marker-Ball-Pink-icon.png', selected: url + 'Map-Marker-Ball-Right-Pink-icon.png' } } }; var map = new google.visualization.Map(document.getElementById('map_div')); map.draw(data, options); } </script> </head> <body> <div id="map_div" style="height: 500px; width: 900px"></div> </body> </html>效果图：org-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["orgchart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); data.addRows([ [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'], [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]); var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); chart.draw(data, {allowHtml:true}); } </script> </head> <body> <div id="chart_div"></div> </body> </html> 效果图：sankey-diagrams-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1.1", {packages:["sankey"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'A', 'X', 5 ], [ 'A', 'Y', 7 ], [ 'A', 'Z', 6 ], [ 'B', 'X', 2 ], [ 'B', 'Y', 9 ], [ 'B', 'Z', 4 ] ]); // Sets chart options. var options = { width: 600, }; // Instantiates and draws our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_basic')); chart.draw(data, options); } </script> </head> <body> <div id="sankey_basic" style="width: 900px; height: 300px;"></div> </body> </html> 效果图：scatter-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number'); data.addColumn('number'); var radius = 100; for (var i = 0; i < 6.28; i += 0.1) { data.addRow([radius * Math.cos(i), radius * Math.sin(i)]); } // Our central point, which will jiggle. data.addRow([0, 0]); var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div')); // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); chart.draw(data, options); function randomWalk() { var x = data.getValue(data.getNumberOfRows() - 1, 0); var y = data.getValue(data.getNumberOfRows() - 1, 1); x += 5 * (Math.random() - 0.5); y += 5 * (Math.random() - 0.5); if (x * x + y * y > radius * radius) { // Out of bounds. Bump toward center. x += Math.random() * ((x < 0) ? 5 : -5); y += Math.random() * ((y < 0) ? 5 : -5); } data.setValue(data.getNumberOfRows() - 1, 0, x); data.setValue(data.getNumberOfRows() - 1, 1, y); chart.draw(data, options); } } </script> </head> <body> <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div> </body> </html> 效果图：stepped-area-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Director (Year)', 'Rotten Tomatoes', 'IMDB'], ['Alfred Hitchcock (1935)', 8.4, 7.9], ['Ralph Thomas (1959)', 6.9, 6.5], ['Don Sharp (1978)', 6.5, 6.4], ['James Hawes (2008)', 4.4, 6.2] ]); var options = { title: 'The decline of \'The 39 Steps\'', vAxis: {title: 'Accumulated Rating'}, isStacked: true }; var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>效果图：
table-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1.1", {packages:["table"]}); google.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } </script> </head> <body> <div id="table_div"></div> </body> </html> 效果图：timelines-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["timeline"]}); google.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); chart.draw(dataTable); } </script> </head> <body> <div id="timeline" style="height: 180px;"></div> </body> </html>tree-map-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["treemap"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'], ['Global', null, 0, 0], ['America', 'Global', 0, 0], ['Europe', 'Global', 0, 0], ['Asia', 'Global', 0, 0], ['Australia', 'Global', 0, 0], ['Africa', 'Global', 0, 0], ['Brazil', 'America', 11, 10], ['USA', 'America', 52, 31], ['Mexico', 'America', 24, 12], ['Canada', 'America', 16, -23], ['France', 'Europe', 42, -11], ['Germany', 'Europe', 31, -2], ['Sweden', 'Europe', 22, -13], ['Italy', 'Europe', 17, 4], ['UK', 'Europe', 21, -5], ['China', 'Asia', 36, 4], ['Japan', 'Asia', 20, -12], ['India', 'Asia', 40, 63], ['Laos', 'Asia', 4, 34], ['Mongolia', 'Asia', 1, -5], ['Israel', 'Asia', 12, 24], ['Iran', 'Asia', 18, 13], ['Pakistan', 'Asia', 11, -52], ['Egypt', 'Africa', 21, 0], ['S. Africa', 'Africa', 30, 43], ['Sudan', 'Africa', 12, 2], ['Congo', 'Africa', 10, 12], ['Zaire', 'Africa', 8, 10] ]); tree = new google.visualization.TreeMap(document.getElementById('chart_div')); tree.draw(data, { minColor: '#f00', midColor: '#ddd', maxColor: '#0d0', headerHeight: 15, fontColor: 'black', showScale: true }); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>效果图：
trendlines-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> <script type="text/javascript"> google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', legend: 'none', crosshair: { trigger: 'both', orientation: 'both' }, trendlines: { 0: { type: 'polynomial', degree: 3, visibleInLegend: true, } } }; var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div')); chart.draw(data, options); } </script> </head> <body> <div id='polynomial2_div' style='width: 900px; height: 500px;'></div> </body> </html>效果图：waterfall-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 28, 28, 38, 38], ['Tue', 38, 38, 55, 55], ['Wed', 55, 55, 77, 77], ['Thu', 77, 77, 66, 66], ['Fri', 66, 66, 22, 22] // Treat the first row as data. ], true); var options = { legend: 'none', bar: { groupWidth: '100%' }, // Remove space between bars. candlestick: { fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green } }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>效果图：
wordtrees-charts：
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1.1", {packages:["wordtree"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable( [ ['Phrases'], ['cats are better than dogs'], ['cats eat kibble'], ['cats are better than hamsters'], ['cats are awesome'], ['cats are people too'], ['cats eat mice'], ['cats meowing'], ['cats in the cradle'], ['cats eat mice'], ['cats in the cradle lyrics'], ['cats eat kibble'], ['cats for adoption'], ['cats are family'], ['cats eat mice'], ['cats are better than kittens'], ['cats are evil'], ['cats are weird'], ['cats eat mice'], ] ); var options = { wordtree: { format: 'implicit', word: 'cats' } }; var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic')); chart.draw(data, options); } </script> </head> <body> <div id="wordtree_basic" style="width: 900px; height: 500px;"></div> </body> </html>效果图：miscellaneous-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['gauge']}]}"> </script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['gauge']}); google.setOnLoadCallback(drawGauge); var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, redFrom: 250, redTo: 280, minorTicks: 5}; var gauge; function drawGauge() { gaugeData = new google.visualization.DataTable(); gaugeData.addColumn('number', 'Engine'); gaugeData.addColumn('number', 'Torpedo'); gaugeData.addRows(2); gaugeData.setCell(0, 0, 120); gaugeData.setCell(0, 1, 80); gauge = new google.visualization.Gauge(document.getElementById('gauge_div')); gauge.draw(gaugeData, gaugeOptions); } function changeTemp(dir) { gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25); gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20); gauge.draw(gaugeData, gaugeOptions); } </script> </head> <body> <div id="gauge_div" style="width:280px; height: 140px;"></div> <input type="button" value="Go Faster" οnclick="changeTemp(1)" /> <input type="button" value="Slow down" οnclick="changeTemp(-1)" /> </body> </html>效果图：转载于:https://www.cnblogs.com/iamconan/p/7383534.html
相关资源：Google_Chart_开发指南中文版