折线图（Line Chart）是什么：效果预览与 AI 设计提示词

效果预览

近 6 个月+38%

适合用在哪

增长展示、股价/指标趋势、流量报表、仪表盘。

容易踩的坑

曲线平滑过度会在数据点之间画出不存在的峰谷，误导用户读到虚假趋势。
数据点上千时直接输出完整 path，SVG 节点和重绘开销让低端设备卡顿。
描线动画没响应 prefers-reduced-motion，且动画期间无法读取数值。

设计提示词 · Prompt

折线图（Line Chart / Area Chart）：SVG path，线条 2-2.5px、圆角拐点（stroke-linejoin:round）、品牌色。趋势图必配线下渐变面积填充（fill 用品牌色 25%→0% 的垂直渐变），这是"高级感"的关键一步。数据点只在 hover 时浮现（白底描边圆点）。网格线极浅（#F0F0F4）横线 3-4 条即可，去掉边框。进场动画用 stroke-dashoffset 描线（1.2s ease-out）。增长曲线可以加一个末端箭头 + 涨幅标签（"+38%"）。平滑用 catmull-rom 转 bezier，别用默认折线。

Line Chart / Area Chart: an SVG path, line 2-2.5px, rounded joins (stroke-linejoin:round), brand color. Trend charts must have a gradient area fill under the line (fill with a vertical gradient of the brand color from 25%→0%) — this is the key step to a "premium" look. Data points appear only on hover (white-filled, stroked dots). Grid lines extremely light (#F0F0F4), 3-4 horizontal lines are enough, no border. Entrance animation draws the line via stroke-dashoffset (1.2s ease-out). A growth curve can get an end arrow + a gain label ("+38%"). Smooth with catmull-rom converted to bezier, not the default polyline.

常见搭配

同一页面里经常和「折线图」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

图表卡片容器Chart Card Container 迷你趋势线Sparkline 分段控制器Segmented Control

演示 HTML 结构

<div class="s d-linechart">
  <svg viewBox="0 0 200 84">
    <defs><linearGradient id="lg1" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#4f46e5" stop-opacity=".28"/><stop offset="1" stop-color="#4f46e5" stop-opacity="0"/>
    </linearGradient></defs>
    <path d="M4,70 C30,66 44,58 62,52 C88,44 104,48 126,34 C146,23 166,20 196,10 L196,84 L4,84 Z" fill="url(#lg1)"/>
    <path d="M4,70 C30,66 44,58 62,52 C88,44 104,48 126,34 C146,23 166,20 196,10" fill="none" stroke="#4f46e5" stroke-width="2.4" stroke-linecap="round"/>
    <circle cx="196" cy="10" r="3.6" fill="#fff" stroke="#4f46e5" stroke-width="2.2"/>
  </svg>
  <div class="d-linechart__meta"><span>近 6 个月</span><span style="color:var(--i-ok);font-weight:650">+38%</span></div>
</div>