Sparkline 图表在 Layui 表格中渲染失败的常见原因
很多开发者在 Layui 表格里集成 Sparkline 图表时，都踩过同一个坑：直接在 layui.table.render() 的列配置 cols 里，通过 templet 函数插入 标签或者调用 sparkline() 初始化函数。结果往往是页面白屏、控制台报错，或者只有第一行数据能正常显示图表。
为什么会这样？根本原因在于渲染时机不对。Layui 表格为了提高性能，采用的是批量生成 DOM 的策略。当你在 templet 里试图操作元素时，这些单元格很可能还没有被真正挂载到文档流中，其尺寸和样式信息都不可用。而像 jquery.sparkline 这类图表库，恰恰需要依赖这些信息来完成绘制。更棘手的是，当表格发生滚动、分页或数据重绘时，如果没有妥善管理图表的生命周期，旧的图表实例不会自动销毁，新的实例又不断创建，最终导致内存泄漏和视觉上的混乱。
用 done 回调 + 延迟绑定渲染 Sparkline
解决这个问题的核心思路很明确：等待一切就绪，再动手绘图。我们必须等到表格的 DOM 结构完全生成，并且每一行的数据单元格都已插入页面后，再去定位目标元素并初始化图表。这意味着，不能把初始化逻辑写在 templet 里。
- 正确做法是利用
table.render()方法提供的done回调函数。在这个回调里，使用setTimeout(..., 0)或更现代的requestAnimationFrame来确保浏览器的 DOM 更新队列已经刷新完毕。 - 接着，遍历表格内容区域（通常是
.layui-table-body .layui-table-cell）中那些带有特定标记类（例如sparkline-cell）的单元格。 - 对于每个目标单元格，一个稳妥的操作流程是：先清空内部可能存在的旧
元素，然后插入一个新的，最后再调用$(...).sparkline()方法。 - 这里有个关键细节：图表所需的数据，应该直接从当前行的原始数据对象中提取，或者通过
data-*属性预先存储在单元格上。不要试图去解析单元格的innerHTML，因为 Layui 可能已经对内容进行了 HTML 转义或格式化处理。
done: function(res, curr, count) {
requestAnimationFrame(() => {
$('.sparkline-cell').each(function() {
const $cell = $(this);
const data = $cell.data('values'); // 提前存好数组，如 [12, 19, 11, 29, 15]
$cell.empty().append('');
$cell.find('canvas').sparkline(data, {
type: 'line',
width: '80px',
height: '24px',
lineColor: '#39f',
fillColor: 'rgba(57,159,255,0.1)'
});
});
});
}
兼容 Layui 分页/搜索/排序后的图表重绘
方案到这里还没结束。Layui 表格在分页、搜索、排序或者调用 table.reload() 之后，都会重新触发渲染并执行 done 回调。如果只是简单地在回调里创建新图表，而不清理旧的，那么之前创建的 Canvas 元素和图表实例并不会消失，它们会堆积在内存中，并且可能导致新的图表重叠绘制在旧的之上。
- 因此，必须在每次
done回调的开头，主动清理上一轮渲染的遗迹。一句$('.sparkline-cell canvas').remove();就能有效移除所有旧的画布元素。 - 尽量避免使用全局变量来存储图表实例。如果图表需要交互功能（比如鼠标悬停显示数值），建议采用事件委托的方式，将事件监听器绑定到表格的父容器上，通过事件冒泡来捕获对内部
canvas元素的mousemove等操作。 - 对于移动端适配，需要留意 Canvas 的像素比问题。大多数 Sparkline 库默认不会处理
devicePixelRatio，在高清屏上，小尺寸的图表可能会显得模糊。一个常见的 hack 方法是：手动设置canvas.width和canvas.height为 CSS 宽高的数倍，然后再用 CSS 将 Canvas 元素缩放回原始显示尺寸。
替代方案：纯 CSS + SVG 的轻量 Sparkline（无 JS 依赖）
如果你的需求仅仅是展示静态的趋势线，不需要交互，也不需要动态更新数据，那么还有一种更稳定、更轻量的选择：使用 SVG 替代 Canvas。
- 其原理是预先将数据点归一化到 0–100 的坐标区间，然后计算出对应的 SVG
d="M0,80 L20,60 L40,70..."）。 - 利用 SVG 的
viewBox属性来控制内部坐标系的缩放，并通过 CSS 固定其外部容器的宽高。这样可以确保在不同分辨率和缩放级别下，图形都能保持清晰。 - 这种方案的缺点是显而易见的：它无法在数据变化时响应式重绘，必须重新渲染整行 HTML。但它彻底摆脱了对 Ja vaScript 初始化时机的依赖，也省去了相应的执行开销，非常适合数据一次性展示、无需交互的只读报表场景。
实现上稍微复杂的地方在于，数值归一化和路径生成的逻辑需要写在 templet 函数里，并且要注意 Layui 可能会对返回的 HTML 字符串进行转义。一个可靠的技巧是，让 templet 函数返回一个形如 {html: svgStr} 的对象（部分 Layui 版本可能需要升级到 2.9+ 才支持此语法），这可以明确告知 Layui 直接输出原始 HTML。
