17、玩转谷歌图表与地图：从基础到高级应用

最新推荐文章于 2025-11-15 14:30:56 发布

python9snake

最新推荐文章于 2025-11-15 14:30:56 发布

阅读量9

点赞数

CC 4.0 BY-SA版权

分类专栏：解锁HTML5数据可视化文章标签：谷歌图表 ChartWrapper Google电子表格

本文链接：https://blog.youkuaiyun.com/python9snake/article/details/155008520

解锁HTML5数据可视化专栏收录该内容

21 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

玩转谷歌图表与地图：从基础到高级应用

谷歌图表操作指南

在使用谷歌图表时，我们可以轻松地进行图表类型的切换。只要图表类型的数据条目数量相同，通常只需更改图表构造对象中的一个单词即可。例如，通过修改可视化库中调用的方法，就能快速切换图表类型：

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

上述代码将相同的数据渲染成折线图。

另外，使用 ChartWrapper 创建图表也是一种不错的方式。创建谷歌图表有两种方法，这里介绍使用 ChartWrapper 的方式，其目的是减少创建图表所需的代码量。它的主要优点是代码量少、数据源更灵活，缺点是对图表创建步骤的控制较少。

以下是使用 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();

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

此外，还能轻松地进行图表类型的切换，例如将图表更改为柱状图：

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

刷新窗口，即可看到柱状图。

我们还可以将数据源更改为 Google 电子表格，具体操作步骤如下：
1. 访问 http://drive.google.com/ 进行注册/登录。
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 查询，只获取想要查看的项目。例如，对数据进行排序和筛选：

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

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

我们还能通过选项对象自定义烛台图的属性，具体步骤如下：
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 文件，即可看到自定义的烛台图。

最后，我们可以为图表添加仪表盘，让用户能够实时更改数据过滤条件，查看更多或更少的信息。具体步骤如下：
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 文件，即可看到带有控制器的散点图，用户可以选择想要深入查看的年龄范围。

谷歌地图使用指南

我们可以使用 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>

在 JavaScript 文件中，请求 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 文件，即可看到反映各国杀人率的地理图表。

我们还可以对图表进行额外的自定义，例如更改颜色：

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

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

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

默认情况下，当使用标记渲染可视化地图时，鼠标悬停在密集区域会显示放大视图，帮助用户更清晰地查看。

综上所述，谷歌图表和地图提供了丰富的功能和灵活的定制选项，能够满足不同场景下的数据可视化需求。通过上述详细的操作步骤和代码示例，相信你已经掌握了如何使用谷歌图表和地图进行数据展示和分析。在实际应用中，你可以根据具体需求进一步调整和优化，创造出更加个性化和专业的可视化效果。

玩转谷歌图表与地图：从基础到高级应用

谷歌图表操作进阶分析

在前面介绍了谷歌图表众多实用操作的基础上，我们进一步深入分析这些操作背后的原理和优势。

图表类型切换原理

当图表类型的数据条目数量相同时，能够轻松切换图表类型，这得益于谷歌图表的灵活设计。以折线图和其他图表的切换为例，本质上是修改图表构造对象中的关键属性，如 chartType 。不同的 chartType 对应着不同的图表渲染逻辑，但只要数据结构适配，就能快速呈现不同类型的图表，极大地提高了数据可视化的灵活性。

`ChartWrapper` 的优势与局限

ChartWrapper 的主要优势在于减少代码量和增加数据源的灵活性。它将图表创建的多个步骤进行封装，使得代码更加简洁易读。例如，在创建饼图、柱状图等多种图表时，使用 ChartWrapper 可以避免重复编写大量的初始化和配置代码。然而，它也存在一定的局限性，即对图表创建步骤的控制相对较少。如果需要对图表创建的每一个细节进行精细调整，可能就需要采用更传统的方式。

数据源切换至 Google 电子表格的意义

将数据源更改为 Google 电子表格，实现了数据的实时更新和共享。通过公开电子表格并获取 API URL，图表可以直接从电子表格中获取最新数据。这种方式不仅方便了数据的管理和更新，还能结合 SQL 查询对数据进行筛选和排序，满足不同的分析需求。例如，在分析大量数据时，可以通过 SQL 查询只获取感兴趣的数据子集，提高分析效率。

自定义图表属性的作用

通过选项对象自定义图表属性，能够让图表更符合特定的需求和审美。以烛台图为例，通过设置 legend 、 backgroundColor 、 candlestick 等属性，可以改变图表的外观和交互方式。这些属性的设置不仅能提升图表的视觉效果，还能增强用户体验，例如禁用交互元素可以避免不必要的干扰。

仪表盘的价值

为图表添加仪表盘，为用户提供了实时交互的能力。用户可以根据自己的需求调整数据过滤条件，查看不同范围的数据。以散点图为例，通过滑块控制器，用户可以选择特定的年龄范围，深入分析该范围内的数据变化趋势。这种交互性使得数据可视化更加动态和灵活，能够更好地满足用户的探索需求。

谷歌地图使用进阶技巧

在使用 Google 可视化 API 创建地理图表的基础上，我们还可以探索更多的进阶技巧。

地理图表数据更新与维护

在实际应用中，地理图表的数据可能会随着时间不断变化。为了保证图表的实时性，我们可以定期更新数据源。如果使用的是 Google 电子表格作为数据源，可以设置定时任务，自动更新电子表格中的数据，然后图表会根据更新后的数据重新渲染。

地理图表的性能优化

当处理大量数据时，地理图表的渲染性能可能会受到影响。为了优化性能，可以采用以下策略：
- 数据采样 ：在数据量较大时，可以对数据进行采样，只选取部分代表性的数据进行展示。这样可以减少图表的渲染负担，提高响应速度。
- 异步加载 ：将数据加载和图表渲染过程进行异步处理，避免页面卡顿。可以使用 JavaScript 的异步编程技术，如 Promise 、 async/await 等，实现数据的异步加载。

地理图表的交互设计

为了增强地理图表的用户体验，可以添加更多的交互功能。例如：
- 鼠标悬停提示 ：当鼠标悬停在某个国家或地区时，显示该地区的详细信息，如具体的杀人率、人口数量等。
- 点击跳转 ：点击某个国家或地区，可以跳转到相关的详细页面，展示更多关于该地区的信息。

总结与展望

谷歌图表和地图为数据可视化提供了强大的工具和丰富的功能。通过掌握图表类型切换、数据源管理、自定义属性和交互设计等技巧，我们可以创建出高质量、个性化的数据可视化作品。

在未来，随着数据量的不断增加和用户需求的不断提高，谷歌图表和地图可能会进一步发展。例如，支持更多的数据格式和数据源，提供更丰富的图表类型和交互方式，以及更好的性能优化和跨平台兼容性。我们可以期待在更多的领域看到谷歌图表和地图的应用，如金融分析、医疗研究、城市规划等。

同时，我们也应该不断学习和探索新的技术和方法，结合谷歌图表和地图的优势，创造出更有价值的数据可视化解决方案。无论是个人开发者还是企业团队，都可以利用这些工具更好地展示和分析数据，为决策提供有力支持。

以下是一个简单的 mermaid 流程图，展示了创建谷歌地理图表的主要步骤：

graph LR
    A[创建 HTML 和 JS 文件] --> B[加载 Google 可视化包]
    B --> C[添加回调触发 init 函数]
    C --> D[格式化数据源]
    D --> E[配置图表选项]
    E --> F[创建并绘制图表]

通过这个流程图，我们可以更清晰地看到创建谷歌地理图表的整个流程，有助于我们更好地理解和掌握相关操作。

总之，谷歌图表和地图是数据可视化领域的重要工具，通过不断学习和实践，我们可以充分发挥它们的优势，创造出更加出色的数据可视化作品。

17、玩转谷歌图表与地图：从基础到高级应用

玩转谷歌图表与地图：从基础到高级应用

谷歌图表操作指南

谷歌地图使用指南

玩转谷歌图表与地图：从基础到高级应用

谷歌图表操作进阶分析

图表类型切换原理

ChartWrapper 的优势与局限

数据源切换至 Google 电子表格的意义

自定义图表属性的作用

仪表盘的价值

谷歌地图使用进阶技巧

地理图表数据更新与维护

地理图表的性能优化

地理图表的交互设计

总结与展望

`ChartWrapper` 的优势与局限