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. 一个映射到mac风格按键的AHK脚本（替换虚拟机键盘映射）

    Mac键位映射(部分) win+q 退出程序 win+w 关闭当前页面 win+h 隐藏当前窗口 win+shift+h 隐藏其他窗口 win+s 保存 win+o 打开 win+z 撤销 win+s ...

  2. 纯css制作带三角border篇(兼容所有浏览器)

    今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...

  3. 转：RTMPDump源代码分析

    0: 主要函数调用分析 rtmpdump 是一个用来处理 RTMP 流媒体的开源工具包,支持 rtmp://, rtmpt://, rtmpe://, rtmpte://, and rtmps://. ...

  4. Node初学者入门，一本全面的NodeJS教程（转载）

    分类 JS学习   发布 ourjs  2013-12-02 注意 转载须保留原文链接,译文链接,作者译者等信息.     作者: Manuel Kiessling  翻译: goddyzhao &a ...

  5. Android文本输入框(EditText)切换密码的显示与隐藏

    package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...

  6. C#代码像QQ的右下角消息框一样，无论现在用户的焦点在哪个窗口，消息框弹出后都不影响焦点的变化，那么有两种方法

    你QQ的右下角消息框一样,无论现在用户的焦点在哪个窗口,消息框弹出后都不影响焦点的变化,那么有两种方法: 要么重写需要弹出的窗体的事件: protected override CreateParams ...

  7. OpenCV仿射变换+投射变换+单应性矩阵

    本来想用单应性求解小规模运动的物体的位移,但是后来发现即使是很微小的位移也会带来超级大的误差甚至错误求解,看起来这个方法各种行不通,还是要匹配知道深度了以后才能从三维仿射变换来入手了,纠结~ esti ...

  8. Scala 深入浅出实战经典 第54讲：Scala中复合类型实战详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  9. OpenSSL命令---pkcs12

    用途: pkcs12文件工具,能生成和分析pkcs12文件.PKCS#12文件可以被用于多个项目,例如包含Netscape. MSIE 和 MS Outlook. 用法: openssl pkcs12 ...

  10. node-webkit 笔记

    NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScr ...