如何为Plotly.js中的曲面图与带状图添加数据标签？

我用Plotly.js绘制测量数据的3D带状图，但遇到两个问题：

• 2D图表常用的annotations功能在3D图里完全没效果，想给每个带状或x值标记最大值、最小值等数据；
• 希望name或text能永久显示，而不是仅鼠标悬停时可见，试了很多方法都没解决。

我的实现代码如下：

function showResults(){
    let data = [[0,-1,-2,2],[0,-6,-4,2],[0,3,1,1],[0,-1],[0,5,7,4],[0,-3,-1,-2],[0,5,3],[0,4,1,2],[0,-5,5,1],[0,-1,1],[0,1,3,-3],[0,1,-1]];
    let traces = [];
    for (let i = 0; i < data.length; i++) {
        let trace = {
            x: [[0, 0], [1, 1], [2, 2], [3, 3]],
            y: [[i, i+0.5], [i, i+0.5], [i, i+0.5], [i+0.5]],
            z: [[data[i][0], data[i][0]], [data[i][1], data[i][1]], [data[i][2], data[i][2]], [data[i][3], data[i][3]]],
            type: 'surface',
            mode: 'lines+markers+text',
            name: 'group' +i,
            nameposition: 'bottom',
            text: 'group'+i,
            textposition: 'bottom',
            showscale: false,
            showticklabels: true
        };
        traces.push(trace);
    }
    var layout = {
        title: 'wasduwillst',
        autosize: false,
        margin: {
            l: 10,
            r: 40,
            b: 40,
            t: 40,
        },
        annotations:
        {
          x: 2,
          y: 5,
          xref: 'x',
          yref: 'y',
          text: 'Annotation Text',
          showarrow: true,
          arrowhead: 7,
          ax: 0,
          ay: -40
        },
        scene: {
            aspectmode: 'manual',
            aspectratio: {
                x: 1, y: 2.5, z: 0.5, //adjusts the aspect ratio so that the width of the wing is displayed wider than the depth
            },
            xaxis: {title: 'Leading to Trailing'},
            yaxis: {title: 'Column'},
            zaxis: {title: 'Offset'}
        }
    };
    Plotly.newPlot('gd', {
        'data': traces,
        'layout': layout
    });
}

解决方案 #

1. 3D场景标注：改用scene.annotations #

Plotly的2Dannotations不适用于3D场景，必须将标注配置放在layout.scene.annotations中，同时指定3D坐标系引用（xref: 'x scene', yref: 'y scene', zref: 'z scene'）和完整的三维坐标。

修改示例：

scene: {
    // 原有配置...
    annotations: [
        {
            x: 2,
            y: 5,
            z: 0, // 必须指定z轴坐标
            xref: 'x scene',
            yref: 'y scene',
            zref: 'z scene',
            text: '最大值点',
            showarrow: true,
            arrowhead: 2,
            ax: 50,
            ay: -50
        }
    ]
}

2. 永久显示文本：叠加scatter3d层 #

surface类型不支持mode和text的永久显示，可通过叠加scatter3d trace来实现文本标签的固定展示，比如标记每组的极值：

// 在循环生成surface traces后添加以下逻辑
function addExtremumLabels(data, traces) {
    data.forEach((group, i) => {
        // 标记最大值
        let maxVal = Math.max(...group);
        let maxX = group.indexOf(maxVal);
        traces.push({
            type: 'scatter3d',
            x: [maxX],
            y: [i + 0.25], // 带状区域居中y坐标
            z: [maxVal],
            mode: 'text',
            text: `Max: ${maxVal}`,
            textfont: {color: '#ff4444', size: 10},
            showlegend: false
        });

        // 标记最小值
        let minVal = Math.min(...group);
        let minX = group.indexOf(minVal);
        traces.push({
            type: 'scatter3d',
            x: [minX],
            y: [i + 0.25],
            z: [minVal],
            mode: 'text',
            text: `Min: ${minVal}`,
            textfont: {color: '#33b5e5', size: 10},
            showlegend: false
        });
    });
}

// 调用函数添加标签
addExtremumLabels(data, traces);

3. 带状组名称永久显示 #

如果需要显示每组的groupX名称，同样可以用scatter3d在带状区域的固定位置添加文本：

// 在循环内添加
traces.push({
    type: 'scatter3d',
    x: [-0.5], // 放在x轴左侧
    y: [i + 0.25],
    z: [0], // 居中z轴位置
    mode: 'text',
    text: `group${i}`,
    textfont: {color: '#000000', size: 11},
    showlegend: false
});

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