17、玩转谷歌图表与地图：从基础到定制

掌握谷歌图表与地图定制

stem5

于 2025-11-15 14:30:56 发布

阅读量12

点赞数

CC 4.0 BY-SA版权

分类专栏：解锁数据可视化的艺术文章标签： Google Charts ChartWrapper 地理图表

本文链接：https://blog.youkuaiyun.com/stem5/article/details/155008558

解锁数据可视化的艺术专栏收录该内容

21 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

玩转谷歌图表与地图：从基础到定制

1. 更改图表类型

更改图表类型并非复杂之事。只要图表类型的数据条目数量相同，通常只需修改图表实际构造对象中的一个单词即可。例如，通过更改可视化库中调用的方法，能快速切换图表类型：

var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);

上述代码会使用相同的数据，仅将其渲染为折线图（ LineChart 对象）。

2. 使用 ChartWrapper 创建图表

使用 Google Charts 创建图表有两种方式。这里介绍使用 ChartWrapper 对象创建图表，其目的是减少创建图表所需的代码量。
- 优点：代码量少，数据源更灵活。
- 缺点：对图表创建步骤的控制较少。

操作步骤 ：
1. 获取上一个示例（从饼图入门）中的 HTML 文件，仅修改外部 JavaScript 文件的文件路径，其余代码保持不变。
2. 进入 JavaScript 文件，重新开始：
- 加载 Google API 并添加回调：

google.load('visualization', '1.0');
google.setOnLoadCallback(init);

- 创建 `init` 函数：

function init(){
    //...
}

- 构建包含数据源的二维数组：

var dataTable = [
    ['Type of Death','Deaths'],
    ['Diseases of heart', 616828],
    ['Malignant neoplasms', 565469],
    ['Chronic lower respiratory diseases', 141090], 
    ['Cerebrovascular diseases', 134148],
    ['Accidents ', 121902],
    ['Alzheimer\'s disease ', 82435],
    ['Diabetes mellitus', 70553],
    ['Influenza and pneumonia', 56284],
    ['Suicide', 36035],
    ['Septicemia', 35927],
    ['Chronic liver disease and cirrhosis', 29963],
    ['Essential hypertension and hypertensive renal disease', 25742],
    ['Parkinson\'s disease', 20483],
    ['Homicide', 17826],
    ['All other causes', 469062]
];

- 创建选项对象：

var options = {'title':'Deaths, for the 15 leading causes of death: United States, 2008',
    'width':800,
    'height':600,
    "is3D": true};

- 构建并渲染图表：

var chart = new google.visualization.ChartWrapper({
    chartType:'PieChart',
    dataTable:dataTable,
    options:options,
    containerId:'chart'
});
chart.draw();

刷新屏幕，即可看到与上一个示例相同的图表，但使用的代码更少。

3. 一键更改图表类型

在 Google Chart API 的不同视图类型之间切换非常容易，只需更改类型即可。例如，将图表更改为条形图：

var chart = new google.visualization.ChartWrapper({
    chartType:'BarChart',
    dataTable:dataTable,
    options:options,
    containerId:'chart'
});

刷新窗口，将看到一个条形图。

4. 将数据源更改为 Google 电子表格

与 Google API 合作的一个强大功能是产品线之间的深度关联。可以创建一个 Google 电子表格并将其集成到应用程序中。
操作步骤 ：
1. 访问 http://drive.google.com/（原 Google Docs）并注册/登录。
2. 创建一个新的电子表格。
3. 向电子表格中添加数据。
4. 点击“共享”按钮，将视图设置为公开。
5. 根据文档 ID 创建 API URL：
- 文档链接：https://docs.google.com/spreadsheet/ccc?key=0Aldzs55s0XbDdFJfUTNVSVltTS1ZQWQ0bWNsX2xSbVE
- API 链接：https://spreadsheets.google.com/tq?key=0Aldzs55s0XbDdFJfUTNVSVltTS1ZQWQ0bWNsX2xSbVE
6. 打开 JavaScript 文件，删除当前数据源，并用 URL 源替换：

google.load('visualization', '1.0');
google.setOnLoadCallback(init);
function init(){
    var options = {'title':'Deaths, for the 15 leading causes of death: United States, 2008',
        'width':800,
        'height':600};
    var chart = new google.visualization.ChartWrapper({
        chartType:'BarChart',
        dataSourceUrl:"https://spreadsheets.google.com/tq?key=0Aldzs55s0XbDdFJfUTNVSVltTS1ZQWQ0bWNsX2xSbVE",
        options:options,
        containerId:'chart'
    });
    chart.draw();   
}

如果有数据库操作经验，可以向数据源发送简单的 SQL 查询，仅获取想要查看的项目。例如，按不同顺序获取项目，排除 B 列，并根据 D 列（按年龄）排序：

var chart = new google.visualization.ChartWrapper({
    chartType:'BarChart',
    dataSourceUrl:"https://spreadsheets.google.com/tq?key=0Aldzs55s0XbDdFJfUTNVSVltTS1ZQWQ0bWNsX2xSbVE",
    query: 'SELECT A,E,D,C ORDER BY D',
    options:options,
    containerId:'chart'
});

刷新代码后，B 列将消失，数据将根据 D 列进行组织。最后，添加以下代码实现自动刷新：

var chart = new google.visualization.ChartWrapper({
    chartType:'BarChart',
    dataSourceUrl:"https://spreadsheets.google.com/tq?key=0Aldzs55s0XbDdFJfUTNVSVltTS1ZQWQ0bWNsX2xSbVE",
    query: 'SELECT A,E,D,C ORDER BY D',
    refreshInterval: 1,
    options:options,
    containerId:'chart'
});
chart.draw();

返回公共图表并更改其中的数据，图表将自动更新。

5. 使用选项对象自定义图表属性

可以使用 Google Charts API 创建一个烛台图，并将各种配置集成到其中。
操作步骤 ：
1. 创建一个 HTML 文件并将其链接到 JavaScript 文件（如 08.04.candlestick.js）：

<!DOCTYPE html>
<html>
    <head>
        <title>Google Charts Getting Started</title>
        <meta charset="utf-8" />   
        <script src="https://www.google.com/jsapi"></script>
        <script src="./08.04.candlestick.js"></script>  
    </head>
    <body style="background:#fafafa">
        <div id="chart"></div>
    </body>
</html>

在 08.04.candlestick.js 文件中，添加 API 加载和回调函数：

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(init);
function init(){

在 init 函数中，使用 google.visualization.arrayToDataTable 方法创建一个新的 DataTable 对象：

var data = google.visualization.arrayToDataTable([
    ['Mon', 10, 24, 18, 21],
    ['Tue', 31, 38, 55, 74],
    ['Wed', 50, 55, 20, 103],
    ['Thu', 77, 77, 77, 77],
    ['Fri', 68, 66, 22, 15]
], true);

创建图表的选项对象（配置对象）：

var options = {
    legend:'none',
    backgroundColor:{fill:'#eeeeee',strokeWidth:2},
    bar:{groupWidth:17},
    candlestick:{hollowIsRising:true,
        fallingColor:{stroke:'red',fill:'#ffaaaa'},
        risingColor: {stroke:'blue',fill:'#aaaaff'}
    },
    enableInteractivity:false
};

使用以下代码绘制图表：

var chart = new google.visualization.CandlestickChart(document.getElementById('chart'));
chart.draw(data, options);

加载 HTML 文件后，将看到一个自定义的烛台图。

6. 为图表添加仪表盘

可以添加实时控制器，使用户能够更改数据过滤条件，以查看更多或更少的信息。
操作步骤 ：
1. 创建一个 HTML 文件并将其链接到外部 JavaScript 文件（如 08.05.slider.js）：

<!DOCTYPE html>
<html>
    <head>
        <title>Google Charts DASHBOARD</title>
        <meta charset="utf-8" />   
        <script src="https://www.google.com/jsapi"></script>
        <script src="./08.05.slider.js"></script>   
    </head>
    <body style="background:#fafafa">
        <div id="chart"></div>
        <div id="dashboard"></div>
        <div id="filter"></div>
    </body>
</html>

打开 08.05.slider.js 文件，加载 Google 可视化 API，并加载控制器包：

google.load('visualization', '1', {packages: ['controls']});

添加回调：

google.setOnLoadCallback(init);
function init(){

创建数据源，基于 2008 年 CDC 死亡率数据：

var data = google.visualization.arrayToDataTable([
    ['Age (+- 2 Years)', 'Deaths'],
    [2, 4730],
    [7, 2502],
    [12, 3149], 
    [17, 12407],
    [22, 19791],
    [27,20786],
    [32,21489],
    [37,29864],
    [42,46506],
    [47,77417],
    [52, 109125],
    [57,134708],
    [62,161474],
    [67,183450],
    [72,218129],
    [77,287370],
    [82,366190],
    [87,372552],
    [92,251381],
    [100,20892]
]);

创建一个新的仪表盘：

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

创建一个滑块，并提供其连接数据源所需的信息：

var slider = new google.visualization.ControlWrapper({
    containerId: 'filter',
    controlType: 'NumberRangeFilter',
    options: {
        filterColumnLabel: 'Age (+- 2 Years)'
    }
});

创建一个图表：

var chart = new google.visualization.ChartWrapper({
    chartType: 'ScatterChart',
    containerId: 'chart',
    options: {
        legend: 'left',
        title:'Deaths, for the 15 leading causes of death: United States, 2008',
        width: 800,
        height: 600
    }
});

绑定并绘制控制器：

dashboard.bind(slider, chart).draw(data);

加载 HTML 文件后，将看到一个带有控制器的散点图，可选择想要深入研究的年龄范围。

7. 使用 Google 可视化 API 创建地理图表

可以使用基于矢量的世界地图，根据数据馈送突出显示国家。这里使用维基百科按故意杀人率列出的国家列表（最新数据）。
操作步骤 ：
1. 创建一个新的 HTML 和 JavaScript 文件，分别命名为 08.01.geo-chart.html 和 08.01.geo-chart.js。
2. 在 HTML 文件中添加以下代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Geo Charts</title>
        <meta charset="utf-8" />   
        <script src="http://www.google.com/jsapi"></script>
        <script src="./08.01.geo-chart.js"></script>
    </head>
    <body style="background:#fafafa">
        <div id="chart"></div>
    </body>
</html>

在 js 文件中，请求 Google 可视化包的地理图表功能：

google.load('visualization','1',{'packages': ['geochart']});

添加回调，当包准备好时触发 init 函数：

google.setOnLoadCallback(init);
function init(){

在 init 函数中，将维基百科的数据格式化为适用于 Google 可视化 API 的格式：

var data = google.visualization.arrayToDataTable([
    ['Country','Intentional Homicide Rate per 100,000'],
    ['Honduras',87],['El Salvador',71],['Saint Kitts and Nevis',68],
    ['Venezuela',67],['Belize',39],['Guatemala',39], 
    ['Jamaica',39],
    ['Bahamas',36],['Colombia',33],['South Africa', 32],
    ['Dominican Republic',31],['Trinidad and Tobago',28],['Brazil',26],
    ['Dominica', 22],['Saint Lucia',22], 
    ['Saint Vincent and the Grenadines',22],
    ['Panama',20],['Guyana',18],['Mexico',18], 
    ['Ecuador',16],
    ['Nicaragua',13],['Grenada',12], 
    ['Paraguay',12],['Russia',12],
    ['Barbados',11],['Costa Rica',10 ],['Bolivia',8.9],
    ['Estonia',7.5],['Moldova',7.4],['Haiti',6.9],
    ['Antigua and Barbuda',6.8],['Uruguay',6.1],['Thailand',5.3],
    ['Ukraine',5.2],['United States',4.7 ], 
    ['Georgia',4.1],['Latvia',4.1 ],
    ['India',3.2],['Taiwan',3.0 ],['Bangladesh',2.4 ], 
    ['Lebanon',2.2],
    ['Finland',2.1 ],['Israel', 2.1], 
    ['Macedonia',1.94 ],['Canada',1.7],
    ['Czech Republic',1.67], 
    ['New Zealand',1.41],['Morocco',1.40 ],
    ['Chile',1.33], 
    ['United Kingdom',1.23 ],['Australia',1.16],
    ['Poland',1.1 ],['Ireland',0.96 ], 
    ['Italy',.87 ],['Netherlands',.86 ],
    ['Sweden',.86], 
    ['Denmark',.85],['Germany',.81 ],['Spain',0.72],
    ['Norway',0.68],['Austria',0.56],['Japan',.35] 
]);

配置图表选项：

var options = {width:800,height:600};

创建图表：

var chart = new google.visualization.GeoChart(document.getElementById('chart'));
chart.draw(data,options);

加载 HTML 文件后，将看到世界各国以突出显示的颜色反映杀人率。

8. 图表创建流程总结

操作	步骤
更改图表类型	1. 修改图表实际构造对象中的单词；2. 更改可视化库中调用的方法
使用 ChartWrapper 创建图表	1. 加载 Google API 并添加回调；2. 创建 `init` 函数；3. 构建数据源二维数组；4. 创建选项对象；5. 构建并渲染图表
更改数据源为 Google 电子表格	1. 访问 Google Drive 并登录；2. 创建新电子表格；3. 添加数据；4. 设置共享为公开；5. 创建 API URL；6. 修改 JavaScript 文件中的数据源
自定义烛台图	1. 创建 HTML 文件并链接到 JavaScript 文件；2. 加载 API 并添加回调；3. 创建 `DataTable` 对象；4. 创建选项对象；5. 绘制图表
添加仪表盘	1. 创建 HTML 文件并链接到 JavaScript 文件；2. 加载 API 并添加回调；3. 创建数据源；4. 创建仪表盘；5. 创建滑块；6. 创建图表；7. 绑定并绘制控制器
创建地理图表	1. 创建 HTML 和 JavaScript 文件；2. 请求地理图表功能；3. 添加回调；4. 格式化数据；5. 配置选项；6. 创建并绘制图表

9. 图表创建 mermaid 流程图

graph LR
    classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px;
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px;

    A([开始]):::startend --> B(选择操作):::process
    B --> C{操作类型}:::decision
    C -->|更改图表类型| D(修改构造对象和调用方法):::process
    C -->|使用 ChartWrapper 创建图表| E(加载 API、创建函数等):::process
    C -->|更改数据源为 Google 电子表格| F(创建电子表格并集成):::process
    C -->|自定义烛台图| G(创建文件、加载 API 等):::process
    C -->|添加仪表盘| H(创建文件、加载 API 等):::process
    C -->|创建地理图表| I(创建文件、请求功能等):::process
    D --> J([结束]):::startend
    E --> J
    F --> J
    G --> J
    H --> J
    I --> J

通过以上步骤和方法，可以充分利用 Google Charts 和 Google Maps 的功能，创建出各种丰富、交互式的图表和地图。

玩转谷歌图表与地图：从基础到定制

10. 地理图表的工作原理及额外定制

地理图表的逻辑较为简单，主要有三个步骤：
1. 定义数据源 ：如将维基百科的故意杀人率数据格式化为适用于 Google 可视化 API 的格式。
2. 设置图表 ：配置图表的选项，如设置宽度和高度等。
3. 绘制图表 ：使用 google.visualization.GeoChart 创建图表并绘制。

在操作过程中，并非所有国家都能顺利显示。若遇到问题，可搜索最新的 Google 文档，查找支持的国家列表，完整列表可查看 http://gmaps - samples.googlecode.com/svn/trunk/mapcoverage_filtered.html。

此外，还可以对地理图表进行额外的定制。例如，原地图中绿色高亮显示不太符合直观认知，可通过更新选项对象来更改颜色：

var options = {width:800,height:600,
    colorAxis: {colors: ['#eeffee', 'red']}
};

若想让较小的区域更易查看，可将渲染方式切换为基于标记的模式：

var options = {width:800,height:600,
    displayMode: 'markers',
    colorAxis: {colors: ['#22ff22', 'red']}
};

默认情况下，使用标记渲染可视化地图时，当鼠标悬停在密集区域，会有高亮缩放视图，以便更清晰地查看。

11. 不同图表操作的对比分析

操作类型	优点	缺点	适用场景
更改图表类型	操作简单，只需修改少量代码	需保证数据条目数量相同	快速切换不同类型图表展示数据
使用 ChartWrapper 创建图表	代码量少，数据源灵活	对图表创建步骤控制少	快速创建图表，不追求精细控制
更改数据源为 Google 电子表格	可利用 Google 产品线深度关联，方便更新数据	需进行一系列电子表格操作	数据经常更新，且希望实时展示在图表中
自定义烛台图	可对图表样式和交互性进行精细定制	配置选项较多，需了解各选项含义	需要展示特定样式和交互效果的金融数据等
添加仪表盘	可实现实时数据过滤，增强用户交互性	涉及多个组件创建和绑定，代码稍复杂	需要用户根据自身需求筛选数据查看的场景
创建地理图表	能直观展示地理区域的数据分布	部分国家可能显示不全	展示与地理区域相关的数据，如人口、犯罪率等

12. 图表操作的 mermaid 详细流程图

graph LR
    classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px;
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px;

    A([开始操作]):::startend --> B(选择图表操作):::process
    B --> C{操作类型}:::decision
    C -->|更改图表类型| D(检查数据条目数量):::process
    D -->|符合| E(修改构造对象和调用方法):::process
    E --> F(完成更改):::process
    C -->|使用 ChartWrapper 创建图表| G(加载 Google API):::process
    G --> H(创建 init 函数):::process
    H --> I(构建数据源二维数组):::process
    I --> J(创建选项对象):::process
    J --> K(构建并渲染图表):::process
    K --> L(完成创建):::process
    C -->|更改数据源为 Google 电子表格| M(访问 Google Drive 登录):::process
    M --> N(创建新电子表格):::process
    N --> O(添加数据):::process
    O --> P(设置共享为公开):::process
    P --> Q(创建 API URL):::process
    Q --> R(修改 JavaScript 数据源):::process
    R --> S(完成数据源更改):::process
    C -->|自定义烛台图| T(创建 HTML 文件):::process
    T --> U(链接到 JavaScript 文件):::process
    U --> V(加载 API 并添加回调):::process
    V --> W(创建 DataTable 对象):::process
    W --> X(创建选项对象):::process
    X --> Y(绘制图表):::process
    Y --> Z(完成定制):::process
    C -->|添加仪表盘| AA(创建 HTML 文件):::process
    AA --> AB(链接到 JavaScript 文件):::process
    AB --> AC(加载 API 并添加回调):::process
    AC --> AD(创建数据源):::process
    AD --> AE(创建仪表盘):::process
    AE --> AF(创建滑块):::process
    AF --> AG(创建图表):::process
    AG --> AH(绑定并绘制控制器):::process
    AH --> AI(完成仪表盘添加):::process
    C -->|创建地理图表| AJ(创建 HTML 和 JavaScript 文件):::process
    AJ --> AK(请求地理图表功能):::process
    AK --> AL(添加回调):::process
    AL --> AM(格式化数据):::process
    AM --> AN(配置选项):::process
    AN --> AO(创建并绘制图表):::process
    AO --> AP(完成地理图表创建):::process
    F --> AQ([结束操作]):::startend
    L --> AQ
    S --> AQ
    Z --> AQ
    AI --> AQ
    AP --> AQ

通过上述对比分析和详细流程图，可以更清晰地了解不同图表操作的特点和步骤，根据实际需求选择合适的操作方法，进一步提升使用 Google 图表和地图的效率和效果，创建出更符合需求的可视化作品。