Google Chart Tools学习笔记一

最新推荐文章于 2024-07-13 08:08:36 发布

lentionsoft

最新推荐文章于 2024-07-13 08:08:36 发布

阅读量2.8k

点赞数 1

分类专栏： Google

Google 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天曾理为我们推荐了Google Chart 希望我们能学习下，为以后在项目中使用做基础。打开一看，全是英文所以就想还是是做下笔记吧，这样新加入或者其它需要使用此工具的同事可以很方便地学习如何使用它。

此文基本上是Google文档的翻译，如果你希望看英文版的，可以使用此链接访问（ https://developers.google.com/chart/interactive/docs/quick_start）

Hellow Charts!

废话不多说， 先来一个快速示例 显示一个 pie chart:

你可以Copy下面的代码，并保存为HTML文件然后在浏览器中打开查看显示效果：


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

看到这是，可能你会问，这些语句代表什么意呢，他们是如何工作呢？别急，下面我们就来分析下上面的代码，看看它是如何工作的。

Loading the Libraries
首先，如果我们需要运行chart必须要引入三个libraries：

The Google JSAPI API
The Google Visualization library
The library for the chart itself.

这些libraries通过两个 <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 从Google的服务器上。
第二个将加载 Google Visualization 和 Chart本身需要的 libraries. 这里面通常也包含一些你自己的逻辑处理代码。

第二个<script> 标记内部的第一行，应该首先调用 google.load()方法，这个方法的语法如下：

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

visualization 是指加载google.visualization这个库，这个库定义了所有核心类和方法。
1.0 是指哪一个版本被加载，如果是1.0则代码始终加载最新发布版本。
list_of_package_names 在这里你可以指定一系列的google chart库被加载， corechart 库在当前示例中被用到，它定义了大多数最常用的图表，包括pie, bar 和 column charts。任何其它google图表你需要使用，但又没有定义在这个库中，则你需要增加到此数组中。每一个在列表中的都必须是已经被定义好的。例如：我们需要加载core chart插件，一个table chart,则我们的代码应该是这个样子的： google.load('visualization', '1.0', {'packages':['corechart','table']});

在调用了google.load()方法后，你的代码应该调用 google.setOnLoadCallback(my_handler), 这是一个JSAPI方法，当所有库被加载完成后，将会调用你自己写的回调方法 my_handler 你应该在你的回调方法中创建并定义图表。

关于加载库方法的更多详细信息可以参考文档（ https://developers.google.com/chart/interactive/docs/library_loading_enhancements）我也将会在后面再拿出来讨论。

Preparing Data
下面，我们来看下如何为图表准备数据:

所有的图表都是需要数据才能知道如何展现。 Google Chart Tools chart 要求数据必须是在一个javascript 类中，这个类是 google.visualization.DataTable 这个类定义在 Google Visualization 库中，这个库我们已经在前面加载了，所以可以直接使用。

一个 DataTable 是一个二维表，有行和列。每一列都包含数据类型，可选择的ID和可选择的标签。在上面的示例中，实际上是创建了下面这个表格：

type: string label: Topping	type: number label: Slices
Mushrooms	3
Onions	1
Olives	1
Zucchini	1
Pepperoni China	2 5

创建DataTabel的方式有多种，你可以看到更多的方式从此连接中 DataTables and DataViews ，你也可以对你的数据进行新增，编辑，删除列或者行。

你必须确保你的DataTable是符合期望的格式：比如对于 bar 和 pie charts要求两列的表格，每一行都是表示为一个slice或者 bar, 第一列是这个slice 或者 bar的标签，第二列是它的值。而其它的charts会有不同的要求，可能会是更复杂的表格格式。在使用charts前，你应该先阅读对应的文档，以学会如何按要求填充你的数据。

除了你自己准备数据以外，你还可以从一个支持Chart Tools Datasource protocol的网站查询数据。比如：一个google的电子表格页。使用 google.visualization.Query 对象你可以发送一个查询到指定的网站，并且返回填充DataTable的对象，你可以把这个对象传递给chart。关于这个话题的一些高级应用，请参考： Querying a Datasource

More Information

Custominzing the Chart

下面我们来学习一下，如何自定义Chart:

每一个chart都有一些可以自定义的选项，包括标题，颜色，线的厚度，背景色填充等。尽管Chart Tools开发小组已经尽力使默认的chart看起来相当不错，但你也许希望能个性化定制你的chart，比如增加标题或者轴标签。

你可以通过 javascript对象的 option_name / option_value 属性，为你的chart指定自定义选项。每一个chart的详细文档都列出了一系统可以自定义的选项，你可以使用这些选项。比如， options available for the Pie Chart 就包括了 ‘legend’,'title' 和‘is3D’。所有选项都有默认值。在上文的示例中我们的定义方法是这样的：

// Set chart options

  var options = {'title':'How Much Pizza I Ate Last Night',                     'width':400,                     'height':300};

下面这段代码将向我们展示，如何定义legend位置， title, size和是否使用3D效果为Pie Chart：

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':400,
  'height':300
}

一个非常普篇的设置就是设置chart的宽度和高度。你可以在两个地方对他们进行设置：在HTML中的<DIV>元素里，或者在chart选项里（如上面示例一样）。如果你在两个地方都有设置，则在HTML中的设置将不起作用。如果你两个地方都没有进行设置，则chart可能无法正常呈现。

More Information

Customizing charts

Drawing the Chart
好了，所有准备工作都做好了，下面就是如何把它画出来。

在画出图表之前，你必须先实例化一个chart，然后你可以调用它的draw()方法即可。

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

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

chart.draw(data, options);

当然，在Body里，你还需要有一个用来展示chart的DIV

        
        
         
         <body>
        
        
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>  </body>

每一个不同类型的Chart都是一个不同的类。 pie chart是基于类 google.visualization.PieChart， bar chart 基于类 google.visualization.BarChart ，依次类推。所有这些类都是包含在我们之前加载的 corechart包中，然后如果你想使用 treemap或者 geo chart在你的页面中，则你需要额外增加 'treemap' or 'geomap' packages . google chart的构造函数只有一个参数，即需要渲染的Dom元素。

每一个chart都支持draw（）方法，它需要两个输入值，一个DataTable或者DataView对象，包含数据。另一个是可选择的自定义选项对象，这个选项对象不是必须的，如果你忽略它，或者传递了一个null则会使用默认的选项设置。

当draw（）方法被调用后，chart将被画到页面上，每一次你改变了数据，或者设置，都需要调用 draw()方法，以使更新生效。

draw()方法是一个异步的，所以调用后，它会立即返回，但是这个chart的实例，并不一定立即有效，在大多数情况下，这是没有什么问题的。最终这个chart都会被画到页面上。然而，如果你想获取或者设置值，在调用了draw()方法后，你必须等待ready event被触发，此事件标志chart已经OK了，

Troubleshooting

如果你的图没有被展现到页面上, 下面是一些可能帮助你解决此问题的方法:

检查是否有错别字. 记住javascript是一种对大小写敏感的语言.
- 使用JavaScript调试器。在Firefox中，你可以使用JavaScript控制台，在Venkman调试器，或Firebug插件。在Chrome，你可以使用开发工具（按Shift + CTL + J）。
搜索 Google Visualization API discussion group.如果你不能找到回答你的问题的内容，提交你的问题到讨论组中，并给出一个可以重现此问题的链接。

More Information

Adding Interactivity
下面讨论下如何与Chart进行交互, 前面我们已经讲了如何把图表画到页面上，但是如果你想捕获用户事件，或者需要对已经画在页面上的图表的属性或数据进行操作，则你必须侦听chart抛出来的事件。

所有的charts都会抛出一些事件，下面是最常用的几个：

ready - 当chart已经在页面上画好，并且准备返回时抛出，如果你需要从图表请求一些信息，则侦听此方法.
select - 当用户在页面上选择了一些东西时抛出，最常见的情况是用户点击了bar或者 pie slice.
error - 当chart不能根据传入的数据，生成图表时，通常是DataTable的格式有问题.
onmouseover and onmouseout - 当鼠标移到或者移开某一元素时.

侦听事件是很容易的，只需要调用 google.visualization.events.addListener()

传入处理方法关联的chart对象， 事件名称， 处理方法即可。 下面将展示如何注册一个选择事件，你可以把此代码加入到前面我们的示例中。

  // The select handler. Call the chart's getSelection() method
  function selectHandler() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var value = data.getValue(selectedItem.row,0 ); //selectedItem.column
      alert('The user selected ' + value);
    }
  }

  // Listen for the 'select' event, and call my function selectHandler() when
  // the user selects something on the chart.
  google.visualization.events.addListener(chart, 'select', selectHandler);

开发提示: 你可以使用Google平台进行简单演示开发

复制上面的代码。
打开 the AJAX Playground 在浏览器中.
点击 Edit HTML
复制代码到 code 窗口并且编辑它
点击 Run Code 运行你的代码，并显示在下面窗口中.

More Information

Security and Privacy

关于安全和数据隐私注意事项：
Google维护了许多有用并且有趣的图表，其中有一些是我们自己创建的，也有一部分是第三方合作伙伴创建的。所有的charts都依赖于 javascript库，有一些chart可能会发送chart的数据从浏览器到另一个地方进行处理。

Google 自开发Charts：
所有Goolge自己开发的Charts，都会在安全与隐私方面有所考虑，所有Google Chart的文档页面都有一部分关于是否发送chart的数据的数据政策。

第三方Charts:
所有的第三方作者提交画廊同意 Terms of Service 和 Program Policy , ，其中包括规定尊重用户的隐私和其他合法权益。

这是我们对第三方开发者在政策和隐私和安全的要求的概述：
安全

开发人员负责确保他们的图表是安全的和禁止上传恶意的图表。我们可以明显扫描图的安全漏洞，但它仍可能是一个包含恶意软件的图表。例如，图是在浏览器中运行的JavaScript代码；这样，他们可以利用任何标准的JavaScript的漏洞。

隐私权

开发人员同意保护用户的隐私。一些图表在浏览器上执行所有的数据操作；其他人上传数据到谷歌或第三方网站分析数据和进行计算。谷歌不共享数据你上传与他人的图表，除了非常有限的例外的法律规定，在谷歌的隐私政策概述。谷歌也不保持私有数据存储在一个图表：图表，数据上传到服务器，谷歌为你绘制图表的目的只做。图表数据上传到谷歌的服务器是用于调试目的保持一会儿，然后丢弃。开发人员创建图表，收集数据，同意保持足够的隐私政策法律。

如果你不确定是否使用第三方图表，我可以查看代码以确定是否发送数据或使用第三方网站的 JavaScript。