Google Chart API 是谷歌提供的一项动态生成图表的服务。你可以随时自定义图表，以适应网站的外观和感觉。图表使用HTML5/SVG技术提供给iPhone手机， iPad和Android的跨浏览器兼容性（包括VML较旧版本的IE ）和跨平台的可移植性呈现。

官网地址：https://developers.google.com/chart/?hl=zh-cn

运行下面这段代码，可以动态生成一个漂亮的图表

<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', 1],

          ['Pepperoni', 2]

        ]);

        // Set chart options

        var options = {'title':'How Much Pizza I Ate Last Night',

                       'width':400,

                       'height':300};

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

效果如下

那么他到底是如何工作的？

绘制chart需要三个库

  • 谷歌JSAPI库
  • 谷歌可视化库(The Google Visualization library)
  • chart自身的库(相应的packages)

这三个库通过两个<script>标签引入

<!--Load the AJAX API-->

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

  // Load the Visualization API library and the piechart library.

  google.load('visualization', '1.0', {'packages':['corechart']});

  google.setOnLoadCallback(drawChart);

  // ... draw the chart...

</script>

第一个script标签引入了JSAPI库。

第二个script标签引入了谷歌可视化库和chart库，它通常还保存你的chart的代码。

第二个script标签的第一行调用了google.load()函数。这个函数需要以下语法：

google.load('visualization', '1.0', {'packages':[<list_of_package_names>]});

visualization　　　　　　　　加载google.visualization库。该库定义了所有的核心工具类和函数。

1.0　　　　　　 　　　　　　加载的visualization的版本。 1.0始终是当前的生产版本。

list_of_package_names　　 在该示例中的'corechart'库定义了最基本的图表，包括饼图，条形图和柱形图。如果你要绘制的图表不包含在这个库中，你必须为相应的图表增加一条，作为单独的数组项。该库中被定义。例如每个图表的文档列表，这里是如何加载的核心图表加一个表图表： google.load('visualization', '1.0', {'packages':['corechart','table']});

准备数据

创建一个数据表，使用google.visualization.DataTable类

        // 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', 1],

          ['Pepperoni', 2]

        ]);

添加两列，一列类型为string，名称为Topping，另一列类型为number，名称为Slices。

添加五列作为chart的数据

设置chart参数，包括chart的标题、长和宽。

// Set chart options

 var options = {'title':'How Much Pizza I Ate Last Night',

                'width':400,

                'height':300};

使用draw函数将图表绘制到指定的元素上

 // Instantiate and draw our chart, passing in some options.

 var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

 chart.draw(data, options);

数据可视化(3)--Google Charts的更多相关文章

  1. 数据可视化(6)--Google Charts实例

    上头给的关于jqplot的问题暂时解决了,继续google charts. google charts的实例很多,就以区域图(Geochart)为例~~ 区域图(Geochart)是一个国家.大陆或者 ...

  2. 【Data Visual】一文搞懂matplotlib数据可视化

    一文搞懂matplotlib数据可视化 作者:白宁超 2017年7月19日09:09:07 摘要:数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.但是,这并不就意味着数据可视化就一定因为 ...

  3. 【Matplotlib】数据可视化实例分析

    数据可视化实例分析 作者:白宁超 2017年7月19日09:09:07 摘要:数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.但是,这并不就意味着数据可视化就一定因为要实现其功能用途而令 ...

  4. Web 数据可视化

    /***************************************************************************************** * Web 数据可 ...

  5. 超级干货 ：一文读懂数据可视化 ZT

    前言 数据可视化,是指将相对晦涩的的数据通过可视的.交互的方式进行展示,从而形象.直观地表达数据蕴含的信息和规律. 早期的数据可视化作为咨询机构.金融企业的专业工具,其应用领域较为单一,应用形态较为保 ...

  6. 13个可实现超棒数据可视化效果的Javascript框架

    随着商业及其相关需求的发展,数据成为越来越重要的元素之一,为了更加直观和明显的展示商业潜在的趋势和内在的特性,我们需要使用图表和图形的方式来直观动态的展示数据内在秘密,在今天的这篇文章中我们推荐12款 ...

  7. 2018年最佳JavaScript数据可视化和图表库

    现在有很多图表库,但哪一个最好用?这可能取决于许多因素,如业务需求,数据类型,图表本身的目的等等.在本文中,每个JavaScript图表库将与一些关键因素进行比较,包括图表类型,商业或免费和开源状态. ...

  8. 让数据可视化变得简单 – JavaScript 图形库

    作者 | 董叶 公司决策层会围绕着数据来制定相应的策略,数据的重要性与日俱增,政府.金融机构.互联网大厂正在以前所未有的速度收集数据,面对扑面而来的数据,没有抽象.视觉层的帮助,我们很难快速理解掌握其 ...

  9. ECharts-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表

    ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...

随机推荐

  1. 【高德地图API】如何设置Icon的imageSize？

    在地图开发中,我们需要把标注换成各种各样的图片,以突显个性.    在高分辨率的手机下,图片尺寸需要压缩至一半,以保持图片清晰.让我们来看一看,应该如何实现. 有开发者为了改变图片的尺寸,直接写成了 ...

  2. Win7快捷方式图标不显示解决办法

    问题:WIN7的系统,桌面.开始菜单以及任务栏的快捷方式图标显示不正常,看不到程序默认图标,快捷方式图标不显示. 解决方法:删除程序图标缓存即可.   将下面的内容复制到记事本保存为“图标缓存清理.b ...

  3. 通过apt-get安装nvidia驱动

    标签:NVIDIA Driver apt 早前安装的NVIDIA显卡驱动在启动X Server的时候提示版本太新了,要求必须使用340.96的,而新的驱动都到了367 https://wiki.deb ...

  4. Redis 数据结构之Keys

    这是Redis官方文档的keys列表 (1) set  key value--设置某个键为某个值 (2) get key -- 获取设置的值 (3)del key -- 删除设置的键 (4)expir ...

  5. Java Split以竖线作为分隔符

    今天用到了Java中的Split函数,要以“|”作为分割符,当输入竖线时,发现出错,这个问题应该很久前就遇到过,不过太长时间就给忘了! 网上一搜,就找到了答案,这是因为split里面有两个参数,其中一 ...

  6. 如何导入大sql文件到虚拟主机mysql数据库

    大部分网站虚拟主机为了安全起见,都限制了通过命令或者phpMyAdmin导入大sql文件到mysql数据库,例如godaddy只允许站长通过phpMyAdmin上传不超过2m的sql文件,但实际上我们 ...

  7. IIS兼容模式设置

    X-UA-Compatible IE=EmulateIE7 来自为知笔记(Wiz)

  8. Python的Descriptor和Property混用

    一句话,把Property和Descriptor作用在同一个名字上,就只有Property好使.

  9. 【C】——幻方算法

    一.幻方按照阶数可分成了三类,即奇数阶幻方.双偶阶幻方.单偶阶幻方. 二.奇数阶幻方(劳伯法) 奇数阶幻方最经典的填法是罗伯法.填写的方法是: 把1(或最小的数)放在第一行正中:按以下规律排列剩下的( ...

  10. 使用Fragment应用放置后台很久，被系统回收，出现crash

    使用Fragment应用放置后台很久,被系统回收,出现crash:原因:系统做了源码FragmentActivity调用onSaveInstanceState保存Fragment对象,这时候系统恢复保 ...