技术问询：如何生成仅保留线段的极简迷你折线图？

以下是针对不同技术场景的实现方案，完全满足仅保留折线、最小化空间占用的需求：

前端原生实现（HTML + Canvas） #

无需依赖任何第三方库，直接通过Canvas绘制纯折线，空间占用极致：

<canvas id="minimalLineChart" width="300" height="100"></canvas>
<script>
  const canvas = document.getElementById('minimalLineChart');
  const ctx = canvas.getContext('2d');
  
  // 替换为你的业务数据
  const data = [10, 25, 15, 30, 20, 35, 28];
  
  // 计算数据极值，用于坐标映射
  const minVal = Math.min(...data);
  const maxVal = Math.max(...data);
  const valueRange = maxVal - minVal;
  
  // 配置折线样式
  ctx.beginPath();
  ctx.strokeStyle = '#2196F3';
  ctx.lineWidth = 2;
  
  // 遍历数据绘制折线
  data.forEach((val, idx) => {
    // X坐标：按数据点比例分配画布宽度
    const x = (idx / (data.length - 1)) * canvas.width;
    // Y坐标：反转映射（Canvas原点在左上角）
    const y = canvas.height - ((val - minVal) / valueRange) * canvas.height;
    
    idx === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
  });
  
  ctx.stroke();
</script>

• 画布尺寸可根据需求自由调整，width和height直接控制空间大小
• 无任何内边距、边框或额外元素，折线占满整个画布
• 自动适配数据范围，确保折线始终完整显示

Python Matplotlib 实现 #

适合数据分析或后端生成图片场景，彻底移除所有非折线组件：

import matplotlib.pyplot as plt

# 示例数据
data = [10, 25, 15, 30, 20, 35, 28]

# 创建绘图对象，控制整体尺寸
fig, ax = plt.subplots(figsize=(6, 2))

# 绘制折线
ax.plot(data, color='#2196F3', linewidth=2)

# 移除所有冗余元素
ax.set_xticks([])  # 去掉X轴刻度
ax.set_yticks([])  # 去掉Y轴刻度
for spine in ax.spines.values():
    spine.set_visible(False)  # 去掉边框

# 消除内边距，让折线占满整个绘图区域
plt.subplots_adjust(left=0, right=1, top=1, bottom=0)

# 保存或展示图片
plt.savefig('minimal_line_chart.png', dpi=100, bbox_inches='tight', pad_inches=0)
plt.show()

• 通过subplots_adjust彻底消除内边距，最大化空间利用率
• 所有坐标轴、标签、边框完全隐藏，仅保留核心折线
• 可通过figsize参数精确控制图片的宽高比例

关键设计注意事项 #

• 数据映射逻辑：必须确保数据值能自动适配绘图区域的尺寸，避免折线溢出或空间浪费
• 折线样式：选择高对比度的纯色（如深蓝色、深灰色），保证趋势清晰可读
• 空间控制：极端场景下可将内边距设为0，让折线完全填充可用空间

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