Google Chart API学习(二)
生活随笔
收集整理的這篇文章主要介紹了
Google Chart API学习(二)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
書接上回：
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:
效果圖：
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>效果圖：
轉(zhuǎn)載于:https://www.cnblogs.com/iamconan/p/7383535.html
總結(jié)
以上是生活随笔為你收集整理的Google Chart API学习(二)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 隧道尽头的灯
- 下一篇： 网线还能这样玩？？？(哈哈哈，记一次差点