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. Autosizer应用程序窗口控制工具

    Autosizer是一个系统辅助软件,窗口控制工具,它能指定程序窗口的大小位置置顶等,可以将窗口最大化,最小化,比如在需要截图的时候可以讲窗口设定大小640*480,然后用FSCapture捕捉活动窗 ...

  2. Jmeter之JDBC Request使用方法(oracle)

    JDBC Request: 这个sampler可以向数据库发送一个jdbc请求(sql语句),它经常需要和JDBC Connection Configuration 配置元件一起配合使用. 目录: 一 ...

  3. string的+操作与StringBuilder对象

    习惯在C#代码中写str+="xxx";这样代码的请注意啦,如果这种操作是针对单个变量作很多次叠加操作的,很有可能导致性能降低. 大家都知道string与StringBuilder ...

  4. Codeforces Round #177 (Div. 1) 题解【ABCD】

    Codeforces Round #177 (Div. 1) A. Polo the Penguin and Strings 题意 让你构造一个长度为n的串,且里面恰好包含k个不同字符,让你构造的字符 ...

  5. Reset Entity-Framework Migrations

    You need to delete the state: Delete the migrations folder in your project Delete the __MigrationHis ...

  6. iOS-Xcode上传后iTunes Connect构建版本不显示

    在升级到Xcode8版本以后大多数人会碰到这个问题-开开心心开发好一款app以后上传到iTunes后台提交审核,然而iTunes Connect后台活动栏里没有出现我们上传的app,确切的说是显示一会 ...

  7. java对过反射调用方法

      public class InvokeTester { public InvokeTester() { } String str; public InvokeTester(String str) ...

  8. 在SpringMVC中获取request对象的几种方式

    1.最简单的方式(注解法) @Autowired private HttpServletRequest request; 2.最麻烦的方法 a. 在web.xml中配置一个监听 <listene ...

  9. ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?" can not work

    ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?" can not work &quo ...

  10. GitHub使用简单记录

    根据<GotGitHub>[1]所做的一些整理 1. 浏览托管项目 在GitHub的页面中可以使用键盘快捷键 (1)按下问号(?)会在弹出窗口显示当前页面可用的快捷键. (2)在项目的代码 ...