在网站运营过程中，收集并展示用户反馈有助于建立信任与改进产品。通过HTML配合原生JavaScript，我们可以快速搭建一个在线反馈展示页面，并将反馈数据以列表和图表的形式可视化，而不必引入复杂的前端框架。
一、页面结构设计
反馈展示页面主要包含两个部分：反馈列表区域与数据可视化区域。反馈列表用于逐条显示用户提交的内容，可视化区域则用图表呈现整体满意度。
1.1 基础HTML骨架
我们使用普通的块级元素来组织内容，避免错误地写成标签形式。比如用<section>包裹不同模块，用<ul>展示列表。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户反馈展示</title>
</head>
<body>
<h1>用户反馈</h1>
<section id="feedback-list"></section>
<section id="chart-area">
<canvas id="chart" width="400" height="300"></canvas>
</section>
<script src="app.js"></script>
</body>
</html>
二、用JavaScript渲染反馈列表
假设我们已经从接口或本地存储拿到了反馈数据，可以通过脚本动态生成列表项。注意这里的map()是函数调用，不是标签。
2.1 模拟数据与渲染逻辑
下面代码演示如何将数组中的反馈对象插入到页面中，其中对特殊字符做了转义以防XSS。
// 模拟用户反馈数据
const feedbacks = [
{ name: '小李', content: '页面加载很快', score: 5 },
{ name: '小王', content: '希望增加暗黑模式', score: 4 },
{ name: '小张', content: '表单提交后无提示', score: 3 }
];
function escapeText(str) {
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
}
function renderList() {
const box = document.getElementById('feedback-list');
const html = feedbacks.map(function (item) {
return '<li><strong>' + escapeText(item.name) + '</strong>：'
+ escapeText(item.content) + '（评分：' + item.score + '）</li>';
}).join('');
box.innerHTML = '<ul>' + html + '</ul>';
}
renderList();
三、使用Canvas实现简单可视化
为了直观看到评分分布，我们用Canvas画一个柱状图。计算各分数出现次数，再按比例绘制矩形。
3.1 绘制满意度柱状图
function drawChart() {
const canvas = document.getElementById('chart');
const ctx = canvas.getContext('2d');
const counts = [0, 0, 0, 0, 0]; // 1到5分
feedbacks.forEach(function (f) {
if (f.score >= 1 && f.score <= 5) counts[f.score - 1]++;
});
const max = Math.max.apply(null, counts) || 1;
const barWidth = 60;
const gap = 20;
ctx.clearRect(0, 0, canvas.width, canvas.height);
counts.forEach(function (c, i) {
const h = (c / max) * 200;
const x = 30 + i * (barWidth + gap);
const y = 260 - h;
ctx.fillStyle = '#4caf50';
ctx.fillRect(x, y, barWidth, h);
ctx.fillStyle = '#333';
ctx.fillText((i + 1) + '分', x + 18, 280);
});
}
drawChart();
四、对接真实数据源
上述方案使用本地数组，实际项目中可将feedbacks替换为从后端获取的JSON。例如通过fetch向接口请求，再把结果传给renderList与drawChart即可。若接口域名为ipipp.com，则直接填写该地址进行联调。
提示：展示用户反馈时要注意隐私，避免暴露邮箱等敏感信息，必要时做脱敏处理。
小结
通过HTML结构、JavaScript渲染与Canvas绘图，我们实现了一个轻量的在线用户反馈展示与可视化页面。该方案无构建步骤，可直接部署，适合快速验证想法。