如何查找Canvas绘图所用数据源及悬浮提示数据存储位置

问题背景 #

某网站页面通过Canvas渲染图表，图表数据由WebSocket获取；鼠标悬浮图表时会弹出临时提示框（数据嵌入DOM，可被MutationObserver拦截），移开后提示框从DOM中消失。需明确：

1. 构建图表的原始数据存储位置
2. 临时提示框DOM数据的存储位置

解答 #

1. 图表原始数据的存储位置 #

• 若使用成熟前端图表库（如ECharts、Chart.js）：原始数据会被保存在JavaScript内存中的图表实例属性里，比如ECharts的option.series.data、Chart.js的data.datasets这类结构。Canvas本身仅存储渲染后的像素信息，不保留原始数据，图表库通过内存中的数据计算渲染坐标、响应交互。
• 若为自定义Canvas渲染逻辑：原始数据通常存于全局变量、闭包变量或自定义类的实例属性中，用于支撑渲染循环和鼠标交互的计算逻辑。

2. 临时提示框DOM数据的存储位置 #

• 当提示框显示时，对应的DOM节点会被插入到当前页面的DOM树中（一般是<body>或指定的父容器下），此时可通过MutationObserver捕获到它的存在。
• 当提示框被移除DOM树后，该节点会等待浏览器垃圾回收；在它存在的期间，图表库（或自定义逻辑）会在JavaScript内存中持有该节点的引用，用于更新内容、控制显示/隐藏状态。

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