数据可视化(3)--Google Charts

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 optionsvar 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 optionsvar 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);

转载于:https://www.cnblogs.com/CraryPrimitiveMan/p/3469713.html

数据可视化(3)--Google Charts相关推荐

可视化数据网页开发Google Charts（十二）:折线图
Line Chart 概述在浏览器中使用SVG或VML呈现的折线图.当鼠标悬停在点上时显示工具提示. 弯曲的线条您可以通过设置curveType选项来平滑线条,生成此图表的代码如下.注意使用cur ...
可视化数据网页开发Google Charts（一）:加载库
Google Charts 除少数例外情况外,所有包含Google图表的网页都应在网页的<head>中包含以下几行: <script type="text/javascri ...
免费好用的数据可视化软件工具
如果你正在找数据可视化软件工具,或者你正想尝试新的可视化软件,那么接下来的内容一定要认真看. 通过对行业的了解及广泛的研究,小编整理了一份业内绝对最好的且免费的数据可视化工具列表,重点是免费. D3. ...
这10款数据可视化软件工具免费好用
什么是数据可视化工具什么是数据可视化工具,它是如何工作的?根据数维图的说法,它是一种专业的数据工具,使用各种视觉表示和元素,如地图.图表.图形等.简而言之,它是一种从特定来源获取数据并将其转换为可视 ...
【Matplotlib】数据可视化实例分析
数据可视化实例分析作者:白宁超 2017年7月19日09:09:07 摘要:数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.但是,这并不就意味着数据可视化就一定因为要实现其功能用途而令 ...
[译] 数据可视化教程：基于Google Sheets 和 RStudio Shiny 建立实时仪表盘
Thanks for Douglas Watson,the original English version is http://douglas-watson.github.io/post/gdocs ...
AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）
首先肯定是给出demo啦: 演示demo 直接到左侧选择框中选择View taxi flow里面随便选个日期总体介绍最近由于工作室项目需要做一个数据可视化平台,这个平台最终是交由国外人使用的.而国 ...
整理了4000字的Google数据可视化指南！
译者丨红薯啊红薯链接丨https://www.ui.cn/detail/477349.html 今天跟大家分享一套谷歌数据可视化团队形成的全面的数据可视化指南,涵盖了设计原则.图表分类.图表的选用. ...
Google 数据可视化团队总结的可视化硬核指南！
今天分享一份谷歌数据可视化团队形成的一套全面的数据可视化指南, 涵盖了设计原则.图表分类.图表的选用.样式设计.交互设计.仪表板设计等方面.有人对其进行了翻译,希望能够分享给更多对数据可视化有兴趣的同 ...

数据可视化(3)--Google Charts

数据可视化(3)--Google Charts相关推荐

最新文章

热门文章