Google Chart 图表工具之初见

最新推荐文章于 2025-01-07 09:00:00 发布

原创最新推荐文章于 2025-01-07 09:00:00 发布

· 1.2k 阅读

2 ·

版权

文章标签：

#Google #Javascript #图表工具

Javascript 专栏收录该内容

1 篇文章

订阅专栏

本文分享了如何使用 Google Chart 库快速生成简洁美观的图表，包括加载类库、数据准备、配置图表选项及 Ajax 数据获取等步骤。详细介绍了饼图的生成过程，并提供了从后台获取数据的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一直以来对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>