能否使用Plotly JS在Web UI实现指定3D图表效果？

可以用Plotly JS实现接近你需求的3D图表效果，核心是通过**3D平面（surface类型）**构建黄色和白色区域，结合动态计算的坐标轴最值定义区域范围，以下是具体方案：

关键实现步骤 #

• 动态计算坐标轴最值：遍历所有数据点的x、y、z值，分别算出每个轴的min和max，作为区域划分的基准
• 添加3D平面区域：使用surface类型的trace创建黄色和白色平面，每个平面由边界坐标点生成（比如白色区域覆盖各轴min到中间值，黄色区域覆盖中间值到max，可按需调整规则）
• 整合现有散点数据：保留原有的scatter3d散点trace，将平面trace设置在散点下方（通过layer: "below"），避免遮挡数据点

调整后的示例代码 #

// 动态计算各轴最值
const allX = [...x, ...a, ...d];
const allY = [...y, ...b, ...e];
const allZ = [...z, ...c, ...f];
const xMin = Math.min(...allX);
const xMax = Math.max(...allX);
const yMin = Math.min(...allY);
const yMax = Math.max(...allY);
const zMin = Math.min(...allZ);
const zMax = Math.max(...allZ);

// 生成白色区域平面（示例：覆盖各轴min到中间值范围）
const whiteSurface = {
  type: 'surface',
  x: Array(2).fill([xMin, xMin, (xMin+xMax)/2, (xMin+xMax)/2]),
  y: Array(2).fill([yMin, (yMin+yMax)/2, yMin, (yMin+yMax)/2]),
  z: Array(2).fill([zMin, zMin, zMin, zMin]),
  colorscale: [[0, 'white'], [1, 'white']],
  showscale: false,
  opacity: 0.5,
  layer: 'below'
};

// 生成黄色区域平面（示例：覆盖各轴中间值到max范围）
const yellowSurface = {
  type: 'surface',
  x: Array(2).fill([(xMin+xMax)/2, (xMin+xMax)/2, xMax, xMax]),
  y: Array(2).fill([(yMin+yMax)/2, yMax, (yMin+yMax)/2, yMax]),
  z: Array(2).fill([zMax, zMax, zMax, zMax]),
  colorscale: [[0, 'yellow'], [1, 'yellow']],
  showscale: false,
  opacity: 0.5,
  layer: 'below'
};

// 整合所有trace
const data = [
  whiteSurface,
  yellowSurface,
  // 原散点trace1
  {
    x: x,
    y: y,
    z: z,
    marker: { 
      size: 10,
      opacity: 0.7, 
      color: z,
      line: {
        color: 'rgb(204, 204, 204)',
        width: 1
      },
      opacity: 1
    },
    mode: "markers",
    type: "scatter3d"
  },
  // 原散点trace2
  {
    x: a,
    y: b,
    z: c,
    marker: { 
      size: 10,
      opacity: 0.7, 
      color: c,
      line: {
        color: 'rgb(204, 204, 204)',
        width: 1
      },
      opacity: 1
    },
    mode: "markers",
    type: "scatter3d"
  },
  // 原散点trace3
  {
    x: d,
    y: e,
    z: f,
    marker: { 
      size: 10,
      opacity: 0.7, 
      color: f,
      line: {
        color: '#000',
        width: 2
      },
      opacity: 1
    },
    mode: "markers",
    type: "scatter3d"
  }
];

// 调整layout，使用动态计算的坐标轴范围
const layout = {
  width: 1000,
  height: 1000,
  showlegend: true,
  title: {
    font: { size: 15 },
    text: "Graphe de Youden - Pays"
  },
  scene: {
    xaxis: {
      layer: "below traces",
      dtick: (xMax - xMin)/5, // 动态计算刻度间隔
      range: [xMin, xMax],
      title: { text: "themA CTR-L3 te" },
      titlefont: { size: 12 },
      showbackground: false,
      gridwidth: 2,
      zeroline: false
    },
    yaxis: {
      dtick: (yMax - yMin)/5,
      range: [yMin, yMax],
      title: { text: "niveau 2" },
      titlefont: { size: 12 },
      showbackground: false,
      gridwidth: 2,
      type: "linear"
    },
    zaxis: {       
      zeroline: false,
      dtick: (zMax - zMin)/5,
      range: [zMin, zMax],
      title: { text: "niveau 1" },
      gridwidth: 2,
      gridcolor: "gray",
      type: "linear"
    },
    aspectmode: "cube",
    aspectratio: { x: 1, y: 1, z: 1 },
    camera: {
      up: { x: 0, y: 0, z: 1 },
      center: { x: 0, y: 0, z: 0 },
      eye: { x: 2, y: 1.5, z: 0.15 }
    }
  }
};

Plotly.newPlot("myDiv", data, layout);

补充说明 #

• 平面区域的划分规则可根据实际需求修改，比如仅针对单轴划分区域时，固定另外两个轴的范围即可
• 动态计算的最值会自动适配数据变化，确保区域始终覆盖当前数据范围
• 通过调整opacity参数控制平面透明度，避免完全遮挡散点数据

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