使用阿里云Atlas地区选择器与Plotly.js实现数据可视化与交互 - IT评测·应用市场-qidao123.com

<!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>
<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>

复制代码

npm install express body-parser

复制代码

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 server.js

复制代码