当前位置：首页 > article >正文

利用阿里云Atlas地区选择器与Plotly.js实现数据可视化与交互

article 2026/3/17 5:55:07

在数据科学与可视化领域，交互式图表和地图应用越来越成为数据分析和展示的重要手段。本文将介绍如何结合阿里云Atlas地区选择器与Plotly.js，创建动态交互式的数据可视化应用。

一、阿里云Atlas地区选择器简介

阿里云Atlas是阿里云的一款数据可视化产品，提供了强大的地图与地区选择功能。你可以使用阿里云Atlas地区选择器轻松选择需要展示的数据所在地区。
在这里插入图片描述

阿里云Atlas的地区选择器提供了一个简洁直观的界面，用户可以在地图上选择一个或多个地区，并将这些选择传递给下游应用进行数据处理。这为构建动态的数据应用提供了灵活性和可操作性。

特性：

交互式地图：允许用户在地图上选择多个区域，并将这些信息传递给后台应用。
自定义界面：可以根据需求定制选择器的外观和行为，提供更加贴合业务需求的用户体验。
数据集成：能够与阿里云其他服务和数据源无缝集成，为数据可视化应用提供强大支持。

二、Plotly.js简介

Plotly.js 是一个用于创建交互式图表和可视化的开源JavaScript库。它支持各种类型的图表，包括线性图、散点图、条形图、热力图等，特别适合数据科学与工程中的复杂数据分析和展示。
在这里插入图片描述

Plotly.js的强大之处在于它能够生成高度可定制、动态交互的图表，并且图表不仅可以在Web浏览器中展示，还可以通过API与后台服务进行交互。

特性：

交互性强：支持缩放、拖拽、点击等交互操作，能够为用户提供更加灵活的视图。
丰富的图表类型：支持散点图、线性图、饼图、热力图、3D图等。
易于集成：Plotly.js可以很方便地与其他Web技术（如React、D3.js等）进行集成，构建高度定制的前端应用。

三、阿里云Atlas地区选择器与Plotly.js结合

通过结合使用阿里云Atlas地区选择器与Plotly.js，你可以创建一个动态交互式的数据可视化应用。用户在地图上选择的区域可以直接影响图表展示的内容，使得数据展示更加灵活和个性化。

示例：

地图区域选择：使用阿里云Atlas地区选择器，用户可以选择多个地区。
动态数据更新：选择的区域会通过API传递给后台，后台根据用户选择的区域从数据库获取相应的数据。
Plotly.js渲染图表：后台返回数据后，前端通过Plotly.js实时更新图表，展示所选地区的数据。

通过这种方式，用户可以在交互式的地图上选择不同的地区，查看与之相关的实时数据图表，如各地区的销售情况、流量分析等。

技术实现：

使用阿里云Atlas提供的地区选择器获取用户的选择。
利用JavaScript与Plotly.js实现图表的动态更新。
后端（如Node.js或Python Flask）根据地区选择从数据库或API获取数据。
前端通过Plotly.js更新页面上的可视化图表。

要实现阿里云Atlas地区选择器与Plotly.js的结合，首先需要进行以下步骤：

使用阿里云Atlas地区选择器获取用户选择的地区。
将用户选择的地区信息传递到后端（假设是一个简单的Node.js服务）。
后端从数据库或API获取相关数据。
将数据传递到前端，使用Plotly.js进行动态更新图表。

1. 前端：HTML + JavaScript

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Interactive Data Visualization with Atlas and Plotly.js</title><script src="https://cdn.plot.ly/plotly-latest.min.js"></script><script src="https://cdn.jsdelivr.net/npm/ali-oss/atlas.js"></script> <!-- 引入阿里云 Atlas --><style>body {font-family: Arial, sans-serif;}#map-container {height: 400px;width: 100%;}#plot-container {height: 500px;width: 100%;}</style>
</head>
<body><h1>Interactive Data Visualization</h1><div id="map-container"></div>
<div id="plot-container"></div><script>// 初始化阿里云Atlas地区选择器const atlas = new Atlas.Map({container: 'map-container',areaSelector: true,style: 'background: #f1f1f1;',onAreaSelect: function(selectedArea) {console.log("Selected Area:", selectedArea);  // 输出选择的地区信息// 调用后端API获取相应的图表数据fetchDataAndUpdatePlot(selectedArea);}});// 模拟从后端获取数据function fetchDataAndUpdatePlot(selectedArea) {// 发送选中的地区信息到后端，获取对应的数据fetch('/get-data', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ area: selectedArea })}).then(response => response.json()).then(data => {// 使用Plotly.js渲染数据updatePlot(data);}).catch(error => console.error('Error fetching data:', error));}// 使用Plotly.js更新图表function updatePlot(data) {const trace1 = {x: data.x,  // 数据中的x轴y: data.y,  // 数据中的y轴mode: 'lines+markers',type: 'scatter'};const layout = {title: `Data for Selected Area`,xaxis: { title: 'X Axis' },yaxis: { title: 'Y Axis' }};Plotly.newPlot('plot-container', [trace1], layout);}
</script></body>
</html>

2. 后端：Node.js + Express (假设数据存储在一个API中)

首先，需要安装express并创建一个基本的Node.js服务器：

npm install express body-parser

然后在server.js中实现数据的获取：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();// 使用JSON解析中间件
app.use(bodyParser.json());// 模拟数据：根据地区返回不同的数据
const mockData = {'area1': { x: [1, 2, 3, 4, 5], y: [10, 11, 12, 13, 14] },'area2': { x: [1, 2, 3, 4, 5], y: [5, 6, 7, 8, 9] },'area3': { x: [1, 2, 3, 4, 5], y: [15, 16, 17, 18, 19] }
};// 获取数据接口
app.post('/get-data', (req, res) => {const { area } = req.body;// 查找选择的地区数据const data = mockData[area];if (data) {res.json(data);} else {res.status(404).send('Area not found');}
});// 启动服务器
app.listen(3000, () => {console.log('Server is running on http://localhost:3000');
});

运行步骤:
启动Node.js服务器：打开index.html，加载页面后，你将看到阿里云Atlas地区选择器（地图），以及Plotly.js渲染的图表。

node server.js

代码解析

前端部分：使用引入Plotly.js。
使用阿里云Atlas的地区选择器获取用户选择的地区。当选择区域时，通过fetch将选定的区域信息发送到Node.js后端。fetchDataAndUpdatePlot函数接收用户选择的地区并调用后端API获取数据，然后使用Plotly.js更新图表。

后端部分：使用Node.js和Express创建API，在/get-data端点上根据地区返回不同的模拟数据。数据使用mockData对象模拟，实际应用中可以从数据库或其他API获取。

四、总结

结合阿里云Atlas地区选择器与Plotly.js，你可以轻松构建一个互动性强且灵活的数据可视化平台。这种组合不仅适用于业务数据的展示，也能很好地服务于地理信息系统（GIS）和数据分析领域。无论是销售分析、流量分析还是区域比较，这一技术方案都能为你的数据可视化提供更多的可能性。

希望通过这篇文章，能够帮助你更好地理解如何结合使用阿里云Atlas与Plotly.js来创建强大的数据可视化应用。如果你有任何问题，欢迎在评论区留言交流！

参考资料

https://datav.aliyun.com/portal/school/atlas/area_selector
https://plotly.com/javascript/
https://www.bilibili.com/opus/986676982908452867