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. Linux系统中CPU使用率查询常用的5个命令

    在程序开发中,我们一般都是在Linux系统上进行开发,因此对Linux系统的维护工作很重要.在Linux系统维护中,我们需要经常查看的就是cpu的使用率,分析系统的整体运行情况.那CPU使用率怎么查询 ...

  2. 只写104行代码！在nopCommerce中如何实现自动生成网站地图

    表告诉我说你不知道nopCommerce是什么.它是目前.NET中最流行的完全开源网上商城,由俄罗斯的团队在2008年开始立项一直开发到现在已经是3.3版本了.代码目前托管在codeplex上,有兴趣 ...

  3. Mybatis传多个参数(三种解决方案)

    第一种方案 DAO层的函数方法 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="s ...

  4. 收不到Win10正式版预订通知？一个批处理搞定

    目前,已经有不少Win7.Win8.1用户在系统右下角收到Win10正式版的预订提示窗口.点击接受预订后,系统会将Win10正式版所需的安装文件提前下载好,7月29日正式发布的时候,就可以第一时间升级 ...

  5. RTP-RTCP-RTSP协议的区别与联系

    一．产生的背景 随着互连网的发展,人们已经不满足于传统的HTTP,FTP和电子邮件等文本信息和服务,而对内容丰富多彩的多媒体信息,服务以及多媒体通信方式提出了需求,包括声音,图象,图形,视频信息等等, ...

  6. Mac Port 基本用法总结

    Mac Port 基本用法总结 Mac Port 基本用法总结 1. Mac Port的下载地址 http://www.macports.org/install.php 2. Mac Port的说明文 ...

  7. 迁移至个人blog

    该博客的部分内容已迁移至个人站点:http://dxjia.cn/ 这里后续不再维护,欢迎访问新站点.

  8. BSTestRunner——一个丑在路上的python unnitest HTML报告生成Runner

    今天忽然看到HTMLTestRunner的样式,第一眼的感觉是样式有点过时了,稍微看了下源码,果然最后更新时间是几年前,由于实现比较简单,所以顺手将样式改一下. 效果图 设计思想 既然有UI,那么如果 ...

  9. VC 2010的重大变化

    auto 关键字具有新的默认含义.由于使用旧含义的情况很少见,因此大多数应用程序都不会受此更改影响. 引入了新的 static_assert 关键字,如果代码中已经存在具有某个名称的标识符,则此关键字 ...

  10. 解决oracle 端口 1521 本机127可通 其他ip不通

    http://wenku.baidu.com/link?url=8tRGGObqgLd6-yqprioIZSyluu9K0BgA29Lhx7F57pVDIHbMHVDNTa_SlEmVugGT4QJO ...