Google Chart API学习(一)

来源：互联网发布：sql设置取值默认编辑：程序博客网时间：2024/04/30 21:47

圆饼示例：

<html>  <head>    <!--Load the AJAX API-->    <script type="text/javascript" src="https://www.google.com/jsapi"></script>    <script type="text/javascript">      // Load the Visualization API and the piechart package.      google.load('visualization', '1.0', {'packages':['corechart']});      // Set a callback to run when the Google Visualization API is loaded.      google.setOnLoadCallback(drawChart);      // Callback that creates and populates a data table,      // instantiates the pie chart, passes in the data and      // draws it.      function drawChart() {        // Create the data table.        var data = new google.visualization.DataTable();        data.addColumn('string', 'Topping');        data.addColumn('number', 'Slices');        data.addRows([          ['Mushrooms', 3],          ['Onions', 1],          ['Olives', 1],          ['Zucchini', 3],          ['Pepperoni', 2]        ]);        // Set chart options        var options = {'title':'How Much Pizza I Ate Last Night',                       'width':800,                       'height':600};        // Instantiate and draw our chart, passing in some options.        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));        chart.draw(data, options);      }    </script>  </head>  <body>    <!--Div that will hold the pie chart-->    <div id="chart_div"></div>  </body></html>

运行效果：

annotation-charts

<html>  <head>    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script>    <script type='text/javascript'>      google.load('visualization', '1', {'packages':['annotationchart']});      google.setOnLoadCallback(drawChart);      function drawChart() {        var data = new google.visualization.DataTable();        data.addColumn('date', 'Date');        data.addColumn('number', 'test1');        data.addColumn('string', 'test2');        data.addColumn('string', 'test3');        data.addColumn('number', 'test4');        data.addColumn('string', 'test5');        data.addColumn('string', 'test6');        data.addRows([          [new Date(2014, 2, 15), 12400, undefined, undefined,                                  10645, undefined, undefined],          [new Date(2114, 2, 16), 24045, 'hello1', 'hello2',                                  12374, undefined, undefined],          [new Date(2314, 2, 17), 35022, 'hello3', 'hello4',                                  15766, 'hello5', 'hell06'],          [new Date(2314, 2, 18), 12284, 'hello7', 'hello8',                                  34334, 'hello9', 'hello10'],          [new Date(2314, 2, 19), 8476, 'hello11', 'hello12',                                  66467, 'hello13', 'hello14'],          [new Date(2314, 2, 20), 0, 'hello15', 'hello16',                                  79463, 'hello17', 'hello18']        ]);        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));        var options = {          displayAnnotations: true        };        chart.draw(data, options);      }    </script>  </head>  <body>    <div id='chart_div' style='width: 900px; height: 500px;'></div>  </body></html>

效果图：

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([          ['Year', 'Sales', 'Expenses'],          ['2013',  1000,      400],          ['2014',  1170,      460],          ['2015',  660,       1120],          ['2016',  1030,      540]        ]);        var options = {          title: 'Company Performance',          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},          vAxis: {minValue: 0}        };        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));        chart.draw(data, options);      }    </script>  </head>  <body>    <div id="chart_div" style="width: 900px; height: 500px;"></div>  </body></html>

效果图：

bar-charts:

<html>  <head>    <script type="text/javascript" src="https://www.google.com/jsapi"></script>    <script type="text/javascript">      google.load("visualization", "1.1", {packages:["bar"]});      google.setOnLoadCallback(drawChart);      function drawChart() {        var data = google.visualization.arrayToDataTable([          ['Year', 'Sales', 'Expenses', 'Profit'],          ['2014', 1000, 400, 200],          ['2015', 1170, 460, 250],          ['2016', 660, 1120, 300],          ['2017', 1030, 540, 350]        ]);        var options = {          chart: {            title: 'Company Performance',            subtitle: 'Sales, Expenses, and Profit: 2014-2017',          },          bars: 'horizontal' // Required for Material Bar Charts.        };        var chart = new google.charts.Bar(document.getElementById('barchart_material'));        chart.draw(data, options);      }    </script>  </head>  <body>    <div id="barchart_material" style="width: 900px; height: 500px;"></div>  </body></html>

效果图：

bubble-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([          ['ID', 'X', 'Y', 'Temperature'],          ['',   80,  167,      120],          ['',   79,  136,      130],          ['',   78,  184,      50],          ['',   72,  278,      230],          ['',   81,  200,      210],          ['',   72,  170,      100],          ['',   68,  477,      80]        ]);        var options = {          colorAxis: {colors: ['yellow', 'red']}        };        var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));        chart.draw(data, options);      }    </script>  </head>  <body>    <div id="chart_div" style="width: 900px; height: 500px;"></div>  </body></html>

效果图：

calendar-charts:

<html>  <head>    <script type="text/javascript" src="https://www.google.com/jsapi"></script>    <script type="text/javascript">      google.load("visualization", "1.1", {packages:["calendar"]});      google.setOnLoadCallback(drawChart);   function drawChart() {       var dataTable = new google.visualization.DataTable();       dataTable.addColumn({ type: 'date', id: 'Date' });       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });       dataTable.addRows([          [ new Date(2012, 3, 13), 37032 ],          [ new Date(2012, 3, 14), 38024 ],          [ new Date(2012, 3, 15), 38024 ],          [ new Date(2012, 3, 16), 38108 ],          [ new Date(2012, 3, 17), 38229 ],          // Many rows omitted for brevity.          [ new Date(2013, 9, 4), 38177 ],          [ new Date(2013, 9, 5), 38705 ],          [ new Date(2013, 9, 12), 38210 ],          [ new Date(2013, 9, 13), 38029 ],          [ new Date(2013, 9, 19), 38823 ],          [ new Date(2013, 9, 23), 38345 ],          [ new Date(2013, 9, 24), 38436 ],          [ new Date(2013, 9, 30), 38447 ]        ]);       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));       var options = {         title: "Red Sox Attendance",         height: 350,       };       chart.draw(dataTable, options);   }    </script>  </head>  <body>    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>  </body></html>

效果图：

candlestick-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', 20, 28, 38, 45],      ['Tue', 31, 38, 55, 66],      ['Wed', 50, 55, 77, 80],      ['Thu', 77, 77, 66, 50],      ['Fri', 68, 66, 22, 15]      // Treat first row as data as well.    ], true);    var options = {      legend:'none'    };    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>

效果图：

column-charts:

<html>  <head>    <script type="text/javascript" src="https://www.google.com/jsapi"></script>    <script type="text/javascript">      google.load("visualization", "1.1", {packages:["bar"]});      google.setOnLoadCallback(drawChart);      function drawChart() {        var data = google.visualization.arrayToDataTable([          ['Year', 'Sales', 'Expenses', 'Profit'],          ['2014', 1000, 400, 200],          ['2015', 1170, 460, 250],          ['2016', 660, 1120, 300],          ['2017', 1030, 540, 350]        ]);        var options = {          chart: {            title: 'Company Performance',            subtitle: 'Sales, Expenses, and Profit: 2014-2017',          }        };        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));        chart.draw(data, options);      }    </script>  </head>  <body>    <div id="columnchart_material" style="width: 900px; height: 500px;"></div>  </body></html>

效果图：

0 0