Plotly Sankey图中使用数组作为hovertemplate无悬浮信息

开发者阿泽

2026-7-12

解决Plotly Sankey图节点自定义hover提示（数组形式hovertemplate无效问题）

问题说明

尝试为Sankey图的每个节点设置不同的悬浮提示信息，直接给node.hovertemplate传入字符串数组时，完全没有悬浮信息显示；但传入单个字符串时，所有节点都能正常显示该提示。

原因分析

Plotly的Sankey组件中，node.hovertemplate参数不支持直接传入数组，它仅接受单个模板字符串。要实现每个节点的自定义提示，需要通过customdata配合模板字符串来动态绑定内容。

解决方案

在node配置中添加customdata字段，传入对应每个节点的自定义提示内容数组
将hovertemplate设置为包含%{customdata}的模板字符串，用这个占位符引用customdata中对应位置的值
若需要隐藏Plotly默认的额外提示内容，可在模板末尾加上<extra></extra>

修改后的完整代码

var data = {
  type: "sankey",
  orientation: "h",
  node: {
    pad: 15,
    thickness: 30,
    line: {
      color: "black",
      width: 0.5,
    },
    label: ["A1", "A2", "B1", "B2", "C1", "C2"],
    color: ["blue", "blue", "blue", "blue", "blue", "blue"],
    customdata: ["a", "b", "c", "d", "e", "f"], // 新增自定义数据数组
    hovertemplate: "%{customdata}<extra></extra>" // 用占位符引用自定义数据
  },
  link: {
    source: [0, 1, 0, 2, 3, 3],
    target: [2, 3, 3, 4, 4, 5],
    value: [8, 4, 2, 8, 4, 2],
  },
};

var data = [data];

var layout = {
  title: "Basic Sankey",
  font: {
    size: 10,
  },
};

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