Google Chart 图表工具之初见

来源：互联网发布：怎样在淘宝用网银卡编辑：程序博客网时间：2024/06/06 07:22

一直以来对Javascript都不甚了解,但在工作中又总是免不了接触到.今天遇到一个图表工具 Google Chart,share一下，以免以后忘记。

首先看一下Google Chart 生成的图表的效果,给我的感觉是很简洁,漂亮.

这是使用静态的数据生成的饼图，代码如下

<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', 'Item');      data.addColumn('number', 'Cost');      data.addRows([        ['House Rent', 1400],        ['Phone', 70],        ['Shoping', 450],         ['Traffic', 200],        ['Treat', 200],        ['Travel',550]      ]);      // Set chart options      var options = {'title':'四月份花销',                     'width':450,                     'height':450};      // 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" style="width:400; height:300"></div>  </body></html>

使用Google Chart,首先要加载它的类库,需要三个类库

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

加载方式如下

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

其中JSAPI是用加载其库的,需要放在第一个加载,然后使用google.load('visualization', '1.0', {'packages':[<list_of_package_names>]});来加载其他库.

visualization: 加载google.visualization library. 这个类库定义了核心的类和方法
1.0: 　　 visualization类库的版本
list_of_package_names: 需要加载的Google chart类库的列表.其中corechart定义了基本的图表，如饼图，条形图和柱状图。如果要使用其他的图标，则需要添加对应的图标。

在调用google.load 之后需要调用 google.setOnLoadCallback(drawChart)，在drawChart回调中我们可以准备图表的所需要的数据，通过options对图表做一些定制来符合我们的要求.
Google chart通过 google.visualization.DataTable的class来包装数据。DataTable是一个有行和列的二维表。每列都有对应的数据类型，和关系型数据库中的table类似。
DataTable中的数据需要符合你选择的图表的数据格式，比如饼图需要一个两列的table，第一列代表label，第二列代表value。其他类型的图标需要的数据格式可以在对应的文档中找到。

最后通过 new google.visualization.PieChart(document.getElementById('chart_div'));来创建chart实例i,并调用它的draw方法来画出饼图.

前面我们是通过硬编码的数据来生成饼图, 现在我们通过从后台去数据来生成我们的图标.通过ajax向后台发送http request来获得json数据,然后转化成google chart 需要的格式

引入jquery使ajax的发送和json的处理简单化,后台仅仅是一个servlet来返回hardcode在java代码中. 猛击下载Java代码

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"    pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Last five days' temperature</title><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><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);    function drawChart() {        var data = new google.visualization.DataTable();        data.addColumn('string', 'Year');        data.addColumn('number', 'temperature');        var jsonData = $.ajax({            url : "http://localhost:8080/GoogleChart/5days.do",            dataType : "json",            async : false        }).responseText;        $.each($.parseJSON(jsonData), function(index, item) {            data.addRow([ item.date, parseInt(item.temperature) ]);        });                var chart = new google.visualization.LineChart(document                .getElementById('chart_div'));        chart.draw(data);    }</script></head><body>    <div id="chart_div" style="width: 400; height: 300"></div></body></html>