如何在Plotly JS中悬停堆叠条形图时显示额外的悬停文本

// 引入Plotly JS库
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

// 创建堆叠条形图数据
var data = [
  {
    x: ['A', 'B', 'C'],
    y: [1, 2, 3],
    name: 'Series 1',
    type: 'bar',
    hovertemplate: '%{text}<extra></extra>'
  },
  {
    x: ['A', 'B', 'C'],
    y: [4, 5, 6],
    name: 'Series 2',
    type: 'bar',
    hovertemplate: '%{text}<extra></extra>'
  }
];

// 定义自定义悬停文本函数
function generateHoverText(dataPoint) {
  // 根据需要构建自定义文本
  return 'Additional text: ' + dataPoint.y;
}

// 生成自定义悬停文本数组
var hoverText = data.map(function(dataPoint) {
  return generateHoverText(dataPoint);
});

// 设置自定义悬停文本数组
data.forEach(function(dataPoint, index) {
  dataPoint.text = hoverText[index];
});

// 创建图表对象
var layout = {
  barmode: 'stack'
};

var chart = {
  data: data,
  layout: layout
};

// 绘制图表
Plotly.newPlot('chart', chart);