Plotly.js 散点图显示为空，通常并非数据缺失或更新逻辑错误，而是因 data 参数格式不合法——必须传入由多个 trace 对象组成的数组，而非扁平的 x/y 数组；本文详解正确初始化与动态更新方式，并提供可运行示例。

plotly.js 散点图显示为空，通常并非数据缺失或更新逻辑错误，而是因 data 参数格式不合法——必须传入由多个 trace 对象组成的数组，而非扁平的 x/y 数组；本文详解正确初始化与动态更新方式，并提供可运行示例。

在 Plotly.js 中，Plotly.newPlot() 和 Plotly.update() 的第一个参数 data 必须是一个 trace 对象数组（如 [trace1, trace2]），每个 trace 是一个完整配置对象，包含 x、y、mode、type 等字段。常见误区是误将数据组织为 [[x1, x2, ...], [y1, y2, ...]] 或直接赋值 data.x = [...]，这会导致 Plotly 无法识别有效迹线（trace），从而渲染出空白图表——即使控制台打印 myDiv.data 显示“有内容”，那也只是 DOM 属性快照，不代表数据结构符合 API 规范。

✅ 正确的数据结构示例如下：

const trace1 = {
  name: "buffer",
  x: [60.807, 62.806, 64.814, 66.81, 80.805],
  y: [100, 87, 100, 30, 80],
  mode: "markers+lines", // 推荐显式指定，避免默认行为歧义
  type: "scatter",
  marker: { color: "#1f77b4" }
};

const trace2 = {
  name: "latency",
  x: [64.814, 66.809, 80.804, 140.806, 200.816],
  y: [41.2513, 79.0122, 45.3155, 55.253, 47.278],
  mode: "markers+lines",
  type: "scatter",
  marker: { color: "#ff7f0e" }
};

const data = [trace1, trace2]; // ✅ 关键：数组元素为 trace 对象

⚠️ 注意事项：

Node.js 可靠编程

Node.js 可靠编程技能。避免事件循环阻塞、异步陷阱、ESM 兼容问题和内存泄漏。触发词：Node.js 开发、async/await、流处理、性能优化、安全编码。

下载

• mode: 'scatter' 是无效写法，应使用 'markers'、'lines' 或组合如 'markers+lines'；
• type: 'scatter' 不可省略，它是 trace 类型声明的必需字段；
• 若使用 Plotly.update() 动态追加数据，请确保传入的 data 参数仍为 trace 数组（可复用原数组并修改其 x/y 属性），且索引匹配（如 Plotly.update(myDiv, newData, {}, [0, 1]) 表示更新第 0 和第 1 条 trace）；
• 布局中 paper_bgcolor 和 plot_bgcolor 推荐设为 'transparent' 而非 'rgba(0,0,0,0)'，语义更清晰且兼容性更好；
• 确保容器 <div id="plot"> 具备明确宽高（CSS 中定义），否则 Plotly 可能因尺寸为 0 而无法渲染。<p>完整可运行示例（含 HTML + CSS + JS）：</p><pre class="brush:php;toolbar:false;">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; body { background: black; margin: 0; height: 100vh; } #plot { width: 750px; height: 500px; margin: auto; display: block; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;plot&quot;&gt;&lt;/div&gt; &lt;script src=&quot;https://cdn.plot.ly/plotly-2.27.0.min.js&quot;&gt;&lt;/script&gt; &lt;script&gt; const trace1 = { name: &quot;buffer&quot;, x: [0,1,2,3,4], y: [10,20,15,25,30], mode: &quot;lines+markers&quot;, type: &quot;scatter&quot; }; const trace2 = { name: &quot;latency&quot;, x: [0,1,2,3,4], y: [5,12,8,18,22], mode: &quot;lines+markers&quot;, type: &quot;scatter&quot; }; const layout = { xaxis: { autorange: true, zeroline: true, linecolor: 'white', tickfont: { color: 'white' } }, yaxis: { autorange: true, zeroline: true, linecolor: 'white', tickfont: { color: 'white' } }, margin: { l: 25, r: 10, b: 25, t: 15 }, paper_bgcolor: 'transparent', plot_bgcolor: 'transparent', font: { color: 'white' } }; Plotly.newPlot('plot', [trace1, trace2], layout); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>总结：Plotly.js 图表为空，90% 源于 <code>data 结构错误。牢记「trace 是最小可绘单元」——每个 trace 必须是独立对象，data 是 trace 的数组。初始化时严格遵循此结构，后续调用 Plotly.update() 时也只需更新对应 trace 内部的 x/y 数组即可实现高效动态绘图。