如何用连续线条绘制含数值的多组N×N二维列表网格？

一、Python + Matplotlib 实现（推荐） #

适合生成静态可视化网格，能完美呈现连续线条，还能自定义样式。你有4个5×5矩阵，刚好可以排成2×2的布局。

代码示例： #

import matplotlib.pyplot as plt
import numpy as np

# 替换成你的4个5×5二维列表
grid1 = np.random.randint(0, 100, (5, 5))
grid2 = np.random.randint(0, 100, (5, 5))
grid3 = np.random.randint(0, 100, (5, 5))
grid4 = np.random.randint(0, 100, (5, 5))
grids = [grid1, grid2, grid3, grid4]

# 设置2×2子图布局
fig, axes = plt.subplots(2, 2, figsize=(10, 10))
axes = axes.flatten()

for ax, grid in zip(axes, grids):
    # 绘制底色填充（不需要可以换成白色：cmap='gray'，vmin=0, vmax=0）
    im = ax.imshow(grid, cmap='viridis', aspect='equal')
    # 绘制连续网格线
    ax.set_xticks(np.arange(grid.shape[1]+1)-0.5, minor=True)
    ax.set_yticks(np.arange(grid.shape[0]+1)-0.5, minor=True)
    ax.grid(which='minor', color='black', linestyle='-', linewidth=1.5)
    # 隐藏多余刻度
    ax.tick_params(which='both', bottom=False, left=False, labelbottom=False, labelleft=False)
    # 每个格子填充数值
    for i in range(grid.shape[0]):
        for j in range(grid.shape[1]):
            ax.text(j, i, grid[i, j], ha='center', va='center', color='white', fontsize=10)

# 调整子图间距
plt.tight_layout()
plt.show()

关键说明： #

• 用minor刻度绘制的网格线是连续的，不会像Markdown那样出现分段断点
• 可以修改grid参数里的color和linewidth调整网格样式
• 不需要颜色填充的话，把imshow的参数改成cmap='gray', vmin=0, vmax=0即可

二、Python + Tkinter 实现（桌面GUI） #

如果需要可交互的桌面窗口网格，用Canvas组件直接绘制连续线条：

代码示例： #

import tkinter as tk

def draw_grid(canvas, grid, x_offset, y_offset, cell_size=50):
    rows, cols = len(grid), len(grid[0])
    # 画横向网格线
    for i in range(rows+1):
        y = y_offset + i * cell_size
        canvas.create_line(x_offset, y, x_offset + cols*cell_size, y, width=2)
    # 画纵向网格线
    for j in range(cols+1):
        x = x_offset + j * cell_size
        canvas.create_line(x, y_offset, x, y_offset + rows*cell_size, width=2)
    # 填充数值文本
    for i in range(rows):
        for j in range(cols):
            x = x_offset + j*cell_size + cell_size//2
            y = y_offset + i*cell_size + cell_size//2
            canvas.create_text(x, y, text=str(grid[i][j]), font=('Arial', 12))

# 替换成你的4个5×5网格数据
grid1 = [[i+j for j in range(5)] for i in range(5)]
grid2 = [[i*j for j in range(5)] for i in range(5)]
grid3 = [[(i+1)*(j+1) for j in range(5)] for i in range(5)]
grid4 = [[i-j for j in range(5)] for i in range(5)]

root = tk.Tk()
root.title("连续线条数值网格")
canvas = tk.Canvas(root, width=600, height=600)
canvas.pack()

# 2×2布局放置四个网格
draw_grid(canvas, grid1, 50, 50)
draw_grid(canvas, grid2, 300, 50)
draw_grid(canvas, grid3, 50, 300)
draw_grid(canvas, grid4, 300, 300)

root.mainloop()

三、HTML + CSS 实现（网页端） #

要在网页展示的话，用CSS Grid布局配合边框实现连续线条：

代码示例： #

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid-group {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding: 20px;
        }
        .single-grid {
            display: grid;
            grid-template-columns: repeat(5, 60px);
            grid-template-rows: repeat(5, 60px);
            border: 2px solid #000;
        }
        .grid-cell {
            border: 1px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="grid-group">
        <!-- 第一个5×5网格 -->
        <div class="single-grid">
            <div class="grid-cell">1</div><div class="grid-cell">2</div><div class="grid-cell">3</div><div class="grid-cell">4</div><div class="grid-cell">5</div>
            <div class="grid-cell">6</div><div class="grid-cell">7</div><div class="grid-cell">8</div><div class="grid-cell">9</div><div class="grid-cell">10</div>
            <div class="grid-cell">11</div><div class="grid-cell">12</div><div class="grid-cell">13</div><div class="grid-cell">14</div><div class="grid-cell">15</div>
            <div class="grid-cell">16</div><div class="grid-cell">17</div><div class="grid-cell">18</div><div class="grid-cell">19</div><div class="grid-cell">20</div>
            <div class="grid-cell">21</div><div class="grid-cell">22</div><div class="grid-cell">23</div><div class="grid-cell">24</div><div class="grid-cell">25</div>
        </div>
        <!-- 第二个5×5网格 -->
        <div class="single-grid">
            <!-- 替换成你的数值 -->
        </div>
        <!-- 第三、第四个网格同理复制结构填充数据 -->
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Rasec Malkic