书接上回：
combo-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(drawVisualization); function drawVisualization() { // Some raw data (not necessarily accurate) var data = google.visualization.arrayToDataTable([ ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'], ['2004/05', 165, 938, 522, 998, 450, 614.6], ['2005/06', 135, 1120, 599, 1268, 288, 682], ['2006/07', 157, 1167, 587, 807, 397, 623], ['2007/08', 139, 1110, 615, 968, 215, 609.4], ['2008/09', 136, 691, 629, 1026, 366, 569.6] ]); var options = { title : 'Monthly Coffee Production by Country', vAxis: {title: 'Cups'}, hAxis: {title: 'Month'}, seriesType: 'bars', series: {5: {type: 'line'}} }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html> 效果图：diff-charts:
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", '1.1', {packages:['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var oldData = google.visualization.arrayToDataTable([ ['Name', 'Popularity'], ['Cesar', 250], ['Rachel', 4200], ['Patrick', 2900], ['Eric', 8200] ]); var newData = google.visualization.arrayToDataTable([ ['Name', 'Popularity'], ['Cesar', 370], ['Rachel', 600], ['Patrick', 700], ['Eric', 1500] ]); var colChartBefore = new google.visualization.ColumnChart(document.getElementById('colchart_before')); var colChartAfter = new google.visualization.ColumnChart(document.getElementById('colchart_after')); var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff')); var barChartDiff = new google.visualization.BarChart(document.getElementById('barchart_diff')); var options = { legend: { position: 'top' } }; colChartBefore.draw(oldData, options); colChartAfter.draw(newData, options); var diffData = colChartDiff.computeDiff(oldData, newData); colChartDiff.draw(diffData, options); barChartDiff.draw(diffData, options); } </script> <span id='colchart_before' style='width: 450px; height: 250px; display: inline-block'></span> <span id='colchart_after' style='width: 450px; height: 250px; display: inline-block'></span> <span id='colchart_diff' style='width: 450px; height: 250px; display: inline-block'></span> <span id='barchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>效果图：gantt-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1.1", {packages:["gantt"]}); google.setOnLoadCallback(drawChart); function daysToMilliseconds(days) { return days * 24 * 60 * 60 * 1000; } function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent Complete'); data.addColumn('string', 'Dependencies'); data.addRows([ ['Research', 'Find sources', new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null], ['Write', 'Write paper', null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'], ['Cite', 'Create bibliography', null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'], ['Complete', 'Hand in paper', null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'], ['Outline', 'Outline paper', null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research'] ]); var options = { height: 275 }; var chart = new google.visualization.GanttChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>效果图：
gauge-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["gauge"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 13000); setInterval(function() { data.setValue(1, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 5000); setInterval(function() { data.setValue(2, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 120px;"></div> </body> </html> 效果图：geo-charts:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["geochart"]}); google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); } </script> </head> <body> <div id="regions_div" style="width: 900px; height: 500px;"></div> </body> </html> 效果图：histograms-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([ ['Dinosaur', 'Length'], ['Acrocanthosaurus (top-spined lizard)', 12.2], ['Albertosaurus (Alberta lizard)', 9.1], ['Allosaurus (other lizard)', 12.2], ['Apatosaurus (deceptive lizard)', 22.9], ['Archaeopteryx (ancient wing)', 0.9], ['Argentinosaurus (Argentina lizard)', 36.6], ['Baryonyx (heavy claws)', 9.1], ['Brachiosaurus (arm lizard)', 30.5], ['Ceratosaurus (horned lizard)', 6.1], ['Coelophysis (hollow form)', 2.7], ['Compsognathus (elegant jaw)', 0.9], ['Deinonychus (terrible claw)', 2.7], ['Diplodocus (double beam)', 27.1], ['Dromicelomimus (emu mimic)', 3.4], ['Gallimimus (fowl mimic)', 5.5], ['Mamenchisaurus (Mamenchi lizard)', 21.0], ['Megalosaurus (big lizard)', 7.9], ['Microvenator (small hunter)', 1.2], ['Ornithomimus (bird mimic)', 4.6], ['Oviraptor (egg robber)', 1.5], ['Plateosaurus (flat lizard)', 7.9], ['Sauronithoides (narrow-clawed lizard)', 2.0], ['Seismosaurus (tremor lizard)', 45.7], ['Spinosaurus (spiny lizard)', 12.2], ['Supersaurus (super lizard)', 30.5], ['Tyrannosaurus (tyrant lizard)', 15.2], ['Ultrasaurus (ultra lizard)', 30.5], ['Velociraptor (swift robber)', 1.8]]); var options = { title: 'Lengths of dinosaurs, in meters', legend: { position: 'none' }, }; var chart = new google.visualization.Histogram(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html> 效果图：interval-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', 'x'); data.addColumn('number', 'values'); data.addColumn({id:'i0', type:'number', role:'interval'}); data.addColumn({id:'i1', type:'number', role:'interval'}); data.addColumn({id:'i2', type:'number', role:'interval'}); data.addColumn({id:'i2', type:'number', role:'interval'}); data.addColumn({id:'i2', type:'number', role:'interval'}); data.addColumn({id:'i2', type:'number', role:'interval'}); data.addRows([ [1, 100, 90, 110, 85, 96, 104, 120], [2, 120, 95, 130, 90, 113, 124, 140], [3, 130, 105, 140, 100, 117, 133, 139], [4, 90, 85, 95, 85, 88, 92, 95], [5, 70, 74, 63, 67, 69, 70, 72], [6, 30, 39, 22, 21, 28, 34, 40], [7, 80, 77, 83, 70, 77, 85, 90], [8, 100, 90, 110, 85, 95, 102, 110]]); // The intervals data as narrow lines (useful for showing raw source data) var options_lines = { title: 'Line intervals, default', curveType: 'function', lineWidth: 4, intervals: { 'style':'line' }, legend: 'none' }; var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines')); chart_lines.draw(data, options_lines); } </script> </head> <body> <div id="chart_lines" style="width: 900px; height: 500px;"></div> </body> </html> 效果图：line-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([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> </body> </html>效果图：
转载于:https://www.cnblogs.com/iamconan/p/7383535.html
相关资源：如何利用Google chart API产生二维码