Google Chart API学习(三)

书接上回：

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" onclick="changeTemp(1)" />

  <input type="button" value="Slow down" onclick="changeTemp(-1)" />

 </body>

</html>

效果图：

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

Google Map API 学习三
Google Chart API 参考中文版
Google Chart API 参考中文版文档信息翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...
使用Google Chart API绘制组合图
Google Chart API 绘图组合图作者:方倍工作室地址: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN& ...
使用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 ...
Java数据持久层框架 MyBatis之API学习三（XML 映射配置文件）
对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...

随机推荐

苹果新一代“超级芯片”曝光：M3 Ultra最高可达32核CPU
近日,据外媒消息,苹果计划在2024年推出新一代"超级芯片"M3 Ultra. 据悉,M3 Ultra将大幅增加CPU核心数量,同时GPU核心数量也将适度增加. 具体来说,M3 U ...
1.29 深痛教训关于 unsigned
unsigned long long 无符号长长整型,常用于比 long long 大一倍的整数范围或自然溢出 \(\bmod 2^{64}\) unsigned long long 范围为 \(0\ ...
基本数据类型（primitive type）
数据类型数据类型分为基本数据类型(primitive type)和引用数据类型(reference type) 基本数据类型(primitive type) 数值类型整数类型浮点类型字符类型 ...
如何减少Exadata计算节点CPU的Core数量
最近为某客户做一个Exadata的PoC测试,要求是X8 1/8 rack配置,目前机器是1/4 rack的硬件. OEDA配置时只选择了1/8 rack选项,其他都没有配置.但是在一键刷机时会发现跳 ...
Navicat 15 for MySQL 破解【我亲测可用】
1.去官网下载正版 https://www.navicat.com.cn/ 2.破解下载:https://files-cdn.cnblogs.com/files/del88/NavicatKeygen ...
NC201613 Jelly
题目链接题目题目描述 Nancy喜欢吃果冻! Nancy钻进了一个 \(n \times n \times n\) 的果冻里,她想从(1,1,1)一路上.下.左.右.前.后六个方向吃到(n,n,n ...
Vue+SpringBoot+ElementUI实战学生管理系统-2.搭建Vue+elementUI脚手架
1.项目介绍前一片介绍了项目的整体情况,这一篇开始搭建前端工程,需要的朋友可以拿去自己定制.:) 2.获取源码源码是捐赠方式获取,详细请QQ联系我 :)! 3.项目截图登录页列表操作动态图 ...
TCP协议的流量控制和拥塞控制
一开始,我总是容易把这2个概念搞混淆了,因此,为了加深理解,我写出来整理下思路. 一:流量控制什么是流量控制,它涉及到哪些内容呢? 首先,我们看看一个最简单的tcp传输涉及到哪些东西发送端,数据, ...
发送HTML模板邮件
概述为了增强邮件内容展示的样式,可以将普通的文本邮件转换为HTML内容格式. 在Java中,可以通过页面模板技术来实现.具体来说,可以使用Thymeleaf模板. 具体实现首先,在项目中引入Thy ...
如何处理Long类型精度丢失问题?
一.现象与分析: 1.1. 现象前后端交互,当后端传一些值给前端的时候,如果是long类型,有可能会出现数字太大而前端接收不了(java中的long大于js的number)而导致数据不一致,精度会丢 ...

Google Chart API学习(三)

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

随机推荐

热门专题