Forge Autodesk嵌入图表的CustomToolTip不显示报错如何修复

问题原因 #

1. CustomToolTip构造函数第一个参数结构不符合要求：官方要求第一个参数必须包含id、position两个必填属性，其中position为THREE.Vector3类型的模型世界坐标，你当前传入的hoveredDeviceInfo仅包含id、xcoord、ycoord，缺少必填的position属性，导致内部读取坐标属性时报错。
2. 数据id不匹配：你当前hoveredDeviceInfo的id值为精灵对应的dbId，而后续chartData、currentDeviceData的对象key为Device-01，两者无法匹配，导致工具提示读取不到对应的数据字段抛出undefined错误。
3. 缺少渲染触发逻辑：你仅实例化了CustomToolTip对象，没有调用显示方法将其挂载到Viewer容器中，即使参数正确也无法正常显示。
4. 可选依赖缺失：CustomToolTip内部的图表渲染依赖ECharts 5.x及以上版本，如果你未在页面提前引入ECharts，也会触发渲染报错。

修复步骤 #

1. 提前引入依赖 #

提前在页面中引入ECharts 5.x及以上版本。

2. 修正入参结构与id匹配 #

调整hoveredDeviceInfo的属性，确保id和后续数据key一致，且传入正确的position参数（hover精灵事件中一般会直接返回worldPosition属性），示例代码如下：

const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
const DataVizCore = Autodesk.DataVisualization.Core;
const DataVizUI = Autodesk.DataVisualization.UI;

// 提前建立dbId和设备id的映射关系，根据实际业务替换内容
const dbIdToDeviceId = {
  // 示例：假设触发hover的精灵对应的dbId是1234，对应设备是Device-01
  1234: "Device-01"
}

async function onSpriteHovering(event) {
    const targetDbId = event.dbId;
    // 匹配对应的设备id，和后续数据key保持一致
    const deviceId = dbIdToDeviceId[targetDbId];

    var currentDeviceData = {
        "Device-01": {
            "CO₂": "495.71 ppm",
            "Humidity": "34.33 %RH",
            "Temperature": "21.18 Celsius"
        }
    };

    var chartData = {
        "Device-01": {
            name: "",
            properties: {
                "CO₂": {
                    dataUnit: "ppm",
                    seriesData: [
                        {
                            value: [1612396800000, 492.55117490452676],
                            label: {}
                        },
                        {
                            value: [1612400400000, 494.27072441289187],
                            label: {}
                        }
                    ],
                    yAxis: {
                        dataMin: 450,
                        dataMax: 680
                    }
                },
                "Humidity": {
                    dataUnit: "%RH",
                    seriesData: [{
                        value: [1612396800000, 34.58961659380417],
                        label: {}
                    }],
                    yAxis: {
                        dataMin: 25,
                        dataMax: 50
                    }
                },
            }
        }
    };

    // 修正第一个参数结构，传入必填的position
    const hoveredDeviceInfo = {
        id: deviceId,
        position: event.worldPosition // 事件返回的世界坐标，为THREE.Vector3类型
    }

    const customTooltip = new DataVizUI.CustomToolTip(hoveredDeviceInfo, chartData, currentDeviceData);
    // 调用显示方法，将工具提示挂载到viewer
    customTooltip.setVisible(true);
}

3. 版本匹配检查 #

确保你使用的Forge Viewer版本和DataVisualization扩展版本一致，建议使用v7.80及以上稳定版本。

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