如何将Flask传递的动态元组列表数据在HTML中以图表展示

实现思路 #

后端已通过render_template将元组列表格式的相似度数据传递到detection.html，只需在前端将数据转换为图表可识别的格式，再用轻量图表库渲染成条形图即可。

完整模板代码（detection.html） #

<!DOCTYPE html>
<html>
<head>
    <title>相似度检测结果</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>文件相似度对比</h1>
    <div style="width: 80%; margin: 0 auto;">
        <canvas id="similarityChart"></canvas>
    </div>

    <script>
        // 从Flask数据生成图表标签与数值
        const labels = [
            {% for item in data %}
                "{{ item[0] }} vs {{ item[1] }}",
            {% endfor %}
        ];
        const similarityValues = [
            {% for item in data %}
                {{ item[2] }},
            {% endfor %}
        ];

        // 初始化条形图
        const ctx = document.getElementById('similarityChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: '相似度百分比',
                    data: similarityValues,
                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        title: {
                            display: true,
                            text: '相似度(%)'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: '文件组合'
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

代码说明 #

1. 数据转换：用Jinja2循环遍历后端传来的data列表，把每个元组的前两个元素拼接成X轴标签（如1.txt vs 20.txt），第三个元素作为对应的Y轴百分比数值。
2. 图表渲染：基于Chart.js创建响应式条形图，Y轴固定在0-100区间适配百分比展示，添加轴标题提升可读性。
3. 样式自定义：可通过修改backgroundColor、borderColor调整图表外观，修改外层div的width控制图表显示宽度。

内容的提问来源于stack exchange，提问作者Ayush Kaithwas