饼图和环形图是展示各数据项占比关系时最直观的图表类型。分离型（爆炸型）饼图和分离型环形图会将各个扇区彼此拉开，让每一部分的占比都更加醒目。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成此操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
创建分离型饼图
分离型饼图的扇区彼此分离，适合用来突出展示各个数据项所占的比例。创建分离型饼图的具体操作步骤如下：
- 创建
Workbook对象，并使用LoadFromFile()方法载入包含数据的 Excel 文件。 - 通过
Workbook.Worksheets.get()方法获取数据所在的工作表。 - 调用
Charts.Add()方法添加图表，并将ChartType设置为ExcelChartType.PieExploded。 - 通过
Series.CategoryLabels与Series.Values属性指定图表的分类和数据。 - 设置图表的标题、位置以及数据标签等属性。
- 通过
Workbook.SaveToFile()方法保存工作簿。
下面是一个完整的代码示例，展示了在 React 中将工作表中的产品销售数据创建为分离型饼图：
function App() {
const createExplodedPieChart = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体和 Excel 文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
const inputFileName = 'SalesData.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿，并获取数据所在的工作表
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
const sheet = workbook.Worksheets.get(0);
// 添加一个图表，并将图表类型设置为分离型饼图
const chart = sheet.Charts.Add();
chart.ChartType = xlsModule.ExcelChartType.PieExploded;
// 设置图表的数据区域和标题
chart.DataRange = sheet.Range.get("B2:B7");
chart.SeriesDataFromRange = false;
chart.ChartTitle = "产品销售占比";
chart.ChartTitleArea.IsBold = true;
chart.ChartTitleArea.Size = 12;
// 设置图表的分类标签和数据值，并显示数值标签
const cs = chart.Series.get(0);
cs.CategoryLabels = sheet.Range.get("A2:A7");
cs.Values = sheet.Range.get("B2:B7");
cs.DataPoints.DefaultDataPoint.DataLabels.HasValue = true;
// 设置图表的位置
chart.LeftColumn = 4;
chart.TopRow = 1;
chart.RightColumn = 15;
chart.BottomRow = 25;
// 隐藏绘图区背景并设置图例位置
chart.PlotArea.Fill.Visible = false;
chart.Legend.Position = xlsModule.LegendPositionType.Right;
// 保存文档
const outputFileName = 'ExplodedPieChart_output.xlsx';
workbook.SaveToFile({ fileName: outputFileName });
// 释放资源
workbook.Dispose();
// 从 VFS 读取转换后的文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Create Exploded Pie Chart</h1>
<button onClick={createExplodedPieChart}>
Start
</button>
</div>
);
}
export default App;
运行代码后，得到的分离型饼图的效果：
创建分离型环形图
环形图与饼图类似，但中心有一个圆孔，同样能展示各部分在整体中的占比。分离型环形图则进一步将各个扇区拉开。创建分离型环形图的具体操作步骤如下：
- 创建
Workbook对象，并使用LoadFromFile()方法载入包含数据的 Excel 文件。 - 通过
Workbook.Worksheets.get()方法获取数据所在的工作表。 - 调用
Charts.Add()方法添加图表，并将ChartType设置为ExcelChartType.DoughnutExploded。 - 通过
Series.CategoryLabels与Series.Values属性指定图表的分类和数据。 - 设置图表的标题、位置以及数据标签等属性。
- 通过
Workbook.SaveToFile()方法保存工作簿。
下面是一个完整的代码示例，展示了在 React 中将工作表中的产品销售数据创建为分离型环形图：
function App() {
const createExplodedDoughnutChart = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体和 Excel 文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
const inputFileName = 'SalesData.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿，并获取数据所在的工作表
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
const sheet = workbook.Worksheets.get(0);
// 添加一个图表，并将图表类型设置为分离型环形图
const chart = sheet.Charts.Add();
chart.ChartType = xlsModule.ExcelChartType.DoughnutExploded;
// 设置图表的数据区域和标题
chart.DataRange = sheet.Range.get("B2:B7");
chart.SeriesDataFromRange = false;
chart.ChartTitle = "各产品销售额占比";
chart.ChartTitleArea.IsBold = true;
chart.ChartTitleArea.Size = 12;
// 设置图表的分类标签和数据值，并显示数值标签
const cs = chart.Series.get(0);
cs.CategoryLabels = sheet.Range.get("A2:A7");
cs.Values = sheet.Range.get("B2:B7");
cs.DataPoints.DefaultDataPoint.DataLabels.HasValue = true;
// 设置图表的位置
chart.LeftColumn = 4;
chart.TopRow = 1;
chart.RightColumn = 15;
chart.BottomRow = 25;
// 隐藏绘图区背景并设置图例位置
chart.PlotArea.Fill.Visible = false;
chart.Legend.Position = xlsModule.LegendPositionType.Right;
// 保存文档
const outputFileName = 'ExplodedDoughnutChart_output.xlsx';
workbook.SaveToFile({ fileName: outputFileName });
// 释放资源
workbook.Dispose();
// 从 VFS 读取转换后的文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Create Exploded Doughnut Chart</h1>
<button onClick={createExplodedDoughnutChart}>
Start
</button>
</div>
);
}
export default App;
运行代码后，得到的分离型环形图的效果：
常见问题
生成的图表是空白的，没有扇区
原因：未给图表指定有效的数据系列。例如 DataRange 或 Values 指向了空区域或没有数值的区域，图表没有可绘制的数据。
解决：为图表指定包含数据的单元格区域，例如：
chart.DataRange = sheet.Range.get("A1:B7");
const cs = chart.Series.get(0);
cs.CategoryLabels = sheet.Range.get("A2:A7");
cs.Values = sheet.Range.get("B2:B7");
想让数据标签显示百分比（而不是数值）
原因：饼图和环形图通常用来展示占比，但数据标签默认显示数值，或者未开启百分比标签。
解决：关闭数值标签并开启百分比标签，例如：
const cs = chart.Series.get(0);
cs.DataPoints.DefaultDataPoint.DataLabels.HasValue = false;
cs.DataPoints.DefaultDataPoint.DataLabels.HasPercentage = true;
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
