Google Chart API学习(一)

圆饼示例：

<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>

效果图：

Google Chart API学习(一)的更多相关文章

使用Google Chart API绘制组合图
Google Chart API 绘图组合图作者:方倍工作室地址: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN& ...
Google Chart API 参考中文版
Google Chart API 参考中文版文档信息翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...
使用google chart api生成报表图片
使用google chart api生成报表图片截图折线图饼图柱状图实现方法原理是调用google的报表服务,动态拼接url字符串,得到一张图片,数据和说明文字都是从url中传进去的. ...
google map api 学习笔记
(1)地图的缩放监听函数 google.maps.event.addlistener(map,"zoom_change",function(){ 缩放级别变化后的函数. }); ( ...
转载总结一些关于Google chart api的知识
<script type="text/javascript"> google.setOnLoadCallback(drawChartLine); f ...
Google Map API 学习六
今天其实收货很大的 1.new google.maps.Circle 就是如何在地图上标注一个圆 3.getAnimation 在这里是通过获取Marker是否存在动作,然后如果存在动作的话,就将动作 ...
Google Map API 学习五
今天其实收货很大的 1.InfoWindow google.maps.InfoWindow class An overlay that looks like a bubble and is often ...
Google Map API学习1
这一段时间公司一个新产品上线, 做超市代购的这样,就需要计算每个门店也就是超市,距离小区之间的距离. 我们用的是Google Map 1.批量对地址进行编码,也就是将地址批量转化成对应的Goole ...
利用 Google Chart API 生成二维码大小不一致
大小不一致是由于 chl 参数内容不一样导致的,而 chs 参数只能指定生成图片的大小,不能指定生成具体二维码大小. 比如:https://chart.googleapis.com/chart?ch ...
Google Map API 学习六-设置infoWindow的长宽

随机推荐

【C语言进阶】atoi函数的模拟实现【C的深度解剖】超详细的解释和注释
[C语言进阶]atoi函数的模拟实现[C的深度解剖]超详细的解释和注释那么这里博主先安利一下一些干货满满的专栏啦! 作者: #西城s 这是我的主页:#西城s 在食用这篇博客之前,博主在这里介绍一下其 ...
使用私有gitlab搭建gitbook持续集成
目录环境搭建 1. 安装 Node.js 2. 安装 gitbook 3. 安装 Gitlab Runner 4. 注册Runner gitbook 配置 1. 目录结构 2. 命令行 3. 插件 ...
Kafka-如何重设消费者位移(重设OFFSET)
1. 为什么要重设消费者组位移? 我们知道,Kafka 和传统的消息引擎在设计上是有很大区别的,其中一个比较显著的区别就是,Kafka 的消费者读取消息是可以重演的(replayable). 像 Ra ...
Kafka-生产者性能调优
(一)参数调优参数调优相关代码在实际的kafka开发中,我们会发现,无论是生产者还是消费者,都需要构建一个Properties对象,里面设置了很多参数.在这段代码中有很多常用的参数配置,在线上使用 ...
解决highlightjs中纯文本被解析成HTML无法展示的问题，记一次工作中bug修复的思考
壹 ❀ 引在本周迭代bug修复工作中,遇到了两个比较头疼的bug(同一个客户所提),bug问题描述也很奇怪,客户表示产品的富文本编辑器里的代码块功能,在纯文本语言模式下贴特定代码进去有的看不见,有的 ...
php+bootstrap+jquery+mysql实现购物车项目案例
获取源码一键三连后,评论区留下邮箱安排发送:) 介绍使用php,bootstrap,jquery,mysql实现的简易购物车案例. 通过本案例,你将学习到以下知识点: php 操作 mysql 实 ...
为什么华为今年疯狂招od?
不知道的大家有没有发现这两年市场不好公司用人需求紧缩唯有华子疯狂招人很多人都听过华为OD 但是具体是什么还是有很多人疑惑总结以下三个部分: 1.为啥疯狂招od而不是之前的纯"外包&q ...
【CVE-2024-21626】容器逃逸漏洞修复
哈喽大家好,我是咸鱼. 好久不见,最近有一个很火的 CVE--runc 容器逃逸漏洞.年前的时候我们已经在测试环境进行了相关操作打算年后线上进行修复. 因为今天咸鱼才开工,所以文章也就拖到了现在漏洞 ...
win32 - 将文件的访问权限给特定的用户
需要首先获取特定用户的SID. 这是一些步骤, 验证输入参数. 为可能足够大的SID和域名创建缓冲区. 在循环中,调用LookupAccountName以检索提供的帐户名的SID.如果SID的缓冲区或 ...
多线程系列(七) -ThreadLocal 用法及内存泄露分析
一.简介在 Java web 项目中,想必很多的同学对ThreadLocal这个类并不陌生,它最常用的应用场景就是用来做对象的跨层传递,避免多次传递,打破层次之间的约束. 比如下面这个HttpSer ...

Google Chart API学习(一)

Google Chart API学习(一)的更多相关文章

随机推荐

热门专题