如何为Excel Add-in中的图表添加关闭/隐藏按钮？

Office.js确实没有直接在图表对象上添加原生关闭按钮的API，不过可以通过以下几种替代方案实现需求：

方案1：利用自定义任务窗格绑定图表操作 #

在你的Add-in自定义任务窗格中添加一个“关闭当前图表”按钮，通过监听Excel的选区变化，自动关联选中的图表，点击按钮即可隐藏或删除图表。

代码示例：

// 监听选区变化，记录当前选中的图表ID
Office.context.document.addHandlerAsync(
  Office.EventType.DocumentSelectionChanged,
  async () => {
    await Excel.run(async (context) => {
      const selection = context.workbook.getSelectedRange();
      const charts = selection.worksheet.charts;
      charts.load("items");
      await context.sync();
      
      window.currentChartId = charts.items.length > 0 ? charts.items[0].id : null;
    });
  }
);

// 关闭按钮点击事件逻辑
document.getElementById("closeChartBtn").addEventListener("click", async () => {
  if (!window.currentChartId) return;
  
  await Excel.run(async (context) => {
    const chart = context.workbook.worksheets.getActiveWorksheet().charts.getItem(window.currentChartId);
    // 隐藏图表（设置visible为false），或直接删除（chart.delete()）
    chart.visible = false;
    await context.sync();
  });
});

方案2：插入形状模拟图表上的关闭按钮 #

通过Office.js在图表所在工作表插入一个形状（比如矩形），将其定位在图表的右上角，设置文字为“×”模拟关闭按钮，并绑定选择事件来隐藏对应图表。

代码示例：

async function addCloseButtonToChart(chartName) {
  await Excel.run(async (context) => {
    const worksheet = context.workbook.worksheets.getActiveWorksheet();
    const chart = worksheet.charts.getItem(chartName);
    chart.load("top, left, width, height");
    await context.sync();
    
    // 插入红色矩形作为关闭按钮，定位到图表右上角
    const buttonShape = worksheet.shapes.addShape(
      Excel.AutoShapeType.rectangle,
      chart.left + chart.width - 45,
      chart.top + 8,
      35,
      22
    );
    
    // 设置按钮样式
    buttonShape.textFrame.textRange.text = "×";
    buttonShape.textFrame.textRange.font.size = 16;
    buttonShape.textFrame.textRange.font.color = "#FFFFFF";
    buttonShape.fill.setSolidColor("#E53E3E");
    buttonShape.name = `closeBtn_${chartName}`;
    
    // 监听形状选择事件，触发关闭逻辑
    Office.context.document.addHandlerAsync(
      Office.EventType.DocumentSelectionChanged,
      async () => {
        await Excel.run(async (context) => {
          const selection = context.workbook.getSelectedRange();
          const shapes = selection.worksheet.shapes;
          shapes.load("items");
          await context.sync();
          
          const clickedBtn = shapes.items.find(s => s.name === `closeBtn_${chartName}`);
          if (clickedBtn) {
            chart.visible = false;
            clickedBtn.delete(); // 可选：隐藏图表后删除按钮
            await context.sync();
          }
        });
      }
    );
    
    await context.sync();
  });
}

方案3：通过Ribbon按钮实现快捷关闭 #

在Add-in的Ribbon中添加一个“关闭选中图表”按钮，当用户选中图表时点击该按钮即可执行隐藏/删除操作，无需在图表上直接放置按钮。

Ribbon配置示例（manifest.xml片段）：

<Control xsi:type="Button" id="closeChartButton">
  <Label resid="closeChartLabel" />
  <Supertip>
    <Title resid="closeChartTitle" />
    <Description resid="closeChartDesc" />
  </Supertip>
  <Icon>
    <bt:Image size="16" resid="closeIcon_16" />
    <bt:Image size="32" resid="closeIcon_32" />
    <bt:Image size="80" resid="closeIcon_80" />
  </Icon>
  <Action xsi:type="ExecuteFunction" FunctionName="closeSelectedChart" />
</Control>

对应函数实现：

async function closeSelectedChart() {
  await Excel.run(async (context) => {
    const worksheet = context.workbook.worksheets.getActiveWorksheet();
    const charts = worksheet.charts;
    charts.load("items");
    await context.sync();
    
    // 获取当前选中的图表
    const selectedChart = charts.items.find(chart => chart.isSelected);
    if (selectedChart) {
      selectedChart.visible = false;
      // 或使用 selectedChart.delete() 直接删除图表
      await context.sync();
    }
  });
}

注意事项：

• 方案2中需根据图表位置动态计算按钮坐标，确保按钮始终贴合图表右上角；
• 若支持多图表，需为每个按钮和图表设置唯一关联标识；
• 隐藏的图表可通过任务窗格或其他入口提供恢复显示的功能。

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