JS 展示!使用 GeoChart 可视化的交互式分级统计世界地图

Transform business strategies with advanced india database management solutions.
Post Reply
asimd23
Posts: 440
Joined: Mon Dec 23, 2024 3:26 am

JS 展示!使用 GeoChart 可视化的交互式分级统计世界地图

Post by asimd23 »

今天我们要绘制如上所示的分级统计图。那么,我们需要什么呢?

世界各国地图及其相应人口数量
一段简短的 JavaScript 代码来加载 Google 图表库,我们将根据每个国家的人口数量绘制分级统计图
通用 JavaScript 视图节点,用于在我们的工作流中执行此类代码
我们的数据集是 CSV 文 它包含截至 2013 年的世界 214 个国家及其相应人口数量的列表。

我们还有一个通用 JavaScript 视图节点。最小的工作流程将仅包含一个文件读取器节点来读取 CSV 文件,以及一个通用 JavaScript 视图节点,其中包含正确的 JavaScript 代码块来绘制分级统计图。那么,现在让我们来看看这段 JavaScript 代码。


图 1:分级统计地图是一种地理地图,其中的 BC 数据印度尼西亚 区域根据相应的计算值(在本例中为世界地图上 2013 年人口的对数)进行着色、阴影或图案化。
以下是在通用 JavaScript 视图节点的配置对话框的 JavaScript 编辑器中插入的最终 JS 代码块。

Google Charts 库中的chart.draw()函数 假设数据中的第一列包含国家名称,第二列包含人口数量。在向通用 JavaScript 视图节点提供数据时,请确保数据集中的列顺序正确。

注意:当您将此代码复制到通用 JavaScript 视图节点的配置对话框中的 JavaScript 编辑器中时,请记住检查 JQuery 依赖项,因为 Google JavaScript API 是使用 jQuery 库的getScript()函数加载的。

jQuery 中的 getScript()方法 非常适合加载单个 JS 库。但是,当需要更多并发、可能相互依赖的 JS 库时,其他加载方法可能更合适。我们将在另一篇文章中讨论这些内容。敬请期待!

另外,请注意,我们已经定义了一个从浅蓝色(人口最少的国家)到深蓝色(人口最多的国家)的热图。
Post Reply