在Fusion Charts中用‘Export’文本按钮替换导出图标

实现步骤 #

1. 隐藏默认导出图标 #

修改图表配置，在chart对象中添加showExportMenuItem: "0"，关闭默认导出图标的显示（保持exportenabled: "1"以保留导出功能）：

const employeeSegmentationChartConfigs = {
  type: "pie3d",
  width: "1000",
  height: "450",
  dataFormat: "json",
  dataSource: {
    "chart": {
      "use3DLighting": "0",
      "showPercentValues": "1",
      "decimals": "1",
      "useDataPlotColorForLabels": "1",
      "theme": "fusion",
      "exportenabled": "1",
      "showExportMenuItem": "0", // 隐藏默认导出图标
      "exportfilename": "employeeSegmentationExport",
      "paletteColors": "#7d7d7d,#C70814,#450E76,#9C28B1,#16938E, #C3C146,#532DDF, #7BC82D"
    },
    "data": employeeSegmentationData
  }
}

2. 添加自定义导出文本按钮 #

在图表容器旁插入一个HTML按钮：

<div id="employeeSegmentationChart"></div>
<button id="exportChartBtn">Export</button>

3. 绑定导出触发事件 #

初始化图表后，为按钮添加点击事件，调用Fusion Charts的exportChart方法触发导出操作：

// 初始化并渲染图表
const chartInstance = new FusionCharts(employeeSegmentationChartConfigs);
chartInstance.render("employeeSegmentationChart");

// 绑定按钮点击事件
document.getElementById("exportChartBtn").addEventListener("click", () => {
  chartInstance.exportChart({
    exportFormat: "pdf", // 可选格式：png、jpeg、svg、pdf
    exportFileName: "employeeSegmentationExport"
  });
});

为何Annotations方案未生效 #

Annotations主要用于在图表区域内添加静态文本、图形等元素，无法直接绑定导出功能的交互逻辑。若强行用Annotations实现，需额外处理点击定位、API调用等复杂操作，远不如自定义按钮直接高效。

内容的提问来源于stack exchange，提问作者Vaishnavi K Shylaji