Plotly.js 带状图显示异常，求助数据格式及解决方法

为什么需要成对/多点坐标？ #

Plotly的带状图本质是渲染闭合的3D多边形区域，单个点或一对点只能形成线段，无法构成“带状”。你看到的成对坐标，其实是条带边界的最小组成单元——要形成一个完整的带状，至少需要4个点来勾勒出闭合的轮廓（比如矩形的四个顶点）。

针对你的场景的正确数据结构 #

你的需求是9个带状（x从0到9，对应区间0-1、1-2…8-9），y为时长（0-8000），z为权重（0-5）。以下是可直接复用的代码示例：

// 初始化图表容器
const container = document.getElementById('your-plot-id');

// 构造9个带状的数据集
const ribbonTraces = [];
// 替换这里的zValues为你实际的9个权重数据
const zValues = [1.2, 3.5, 2.8, 4.1, 0.9, 3.3, 2.5, 4.7, 1.8];

for (let i = 0; i < 9; i++) {
  ribbonTraces.push({
    type: 'ribbon',
    // 矩形条带的4个x顶点：左边界、右边界、右边界、左边界（闭合）
    x: [i, i+1, i+1, i],
    // 矩形条带的4个y顶点：底部、底部、顶部、顶部（沿y轴覆盖全时长范围）
    y: [0, 0, 8000, 8000],
    // 4个顶点对应同一个权重值，保证条带颜色/权重一致
    z: [zValues[i], zValues[i], zValues[i], zValues[i]],
    surfacecolor: [zValues[i], zValues[i], zValues[i], zValues[i]],
    showscale: true,
    name: `时间区间 ${i}-${i+1}`
  });
}

// 布局配置
const layout = {
  scene: {
    xaxis: { title: '时间', range: [0, 9] },
    yaxis: { title: '时长', range: [0, 8000] },
    zaxis: { title: '权重', range: [0, 5] }
  }
};

// 渲染图表
Plotly.newPlot(container, ribbonTraces, layout);

关键注意事项 #

• 每个带状轨迹的x、y、z数组长度必须完全一致，否则Plotly会解析失败。
• 如果你的带状需要沿y轴有渐变权重（比如不同时长对应不同权重），只需将z数组替换为对应y点的权重值即可，例如y: [0, 2000, 4000, 8000]，z: [1, 2, 3, 4]。
• 若你需要垂直于y轴的带状，只需调整x和y的顶点顺序，比如x: [i, i, i+1, i+1]，y: [0, 8000, 8000, 0]。

内容的提问来源于stack exchange，提问作者David Brooke Martin