数据标签是 Excel 图表中用于显示数据点详细信息的重要元素，它可以显示数值、系列名称、类别名称等内容。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成对 Excel 图表数据标签的样式设置，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。它提供了完整的 API 用于控制数据标签的显示内容、字体格式、数字格式、位置以及背景边框等外观属性。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
设置数据标签的内容与字体
数据标签可以显示多种信息，包括数值、系列名称、类别名称和图例键等。通过 Spire.XLS for JavaScript，您可以灵活控制数据标签的显示内容，并自定义其字体样式，使图表信息更加清晰易读。具体操作步骤如下：
- 创建
Workbook对象并获取默认工作表。 - 在工作表中填入图表所需的分类标签和数值数据。
- 使用
sheet.Charts.Add()添加图表并设置图表类型。 - 配置图表的数据区域、位置和标题。
- 通过
DataLabels属性启用数据标签的显示内容（如数值、系列名称、类别名称）。 - 设置数据标签的字体属性（字体名称、字号、颜色、加粗等）。
- 使用
SaveToFile()保存工作簿为 Excel 文件。
下面是一个完整的代码示例，展示了在 React 中设置图表数据标签的内容与字体：
function App() {
const setDataLabelContentAndFont = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 创建新工作簿并获取默认工作表
const workbook = new xlsModule.Workbook();
let sheet = workbook.Worksheets.get(0);
sheet.Name = "DataLabelDemo";
// 填入图表数据
sheet.Range.get("A1").Value = "Month";
sheet.Range.get("A2").Value = "Jan";
sheet.Range.get("A3").Value = "Feb";
sheet.Range.get("A4").Value = "Mar";
sheet.Range.get("A5").Value = "Apr";
sheet.Range.get("A6").Value = "May";
sheet.Range.get("A7").Value = "Jun";
sheet.Range.get("B1").Value = "Sales";
sheet.Range.get("B2").NumberValue = 25;
sheet.Range.get("B3").NumberValue = 18;
sheet.Range.get("B4").NumberValue = 8;
sheet.Range.get("B5").NumberValue = 13;
sheet.Range.get("B6").NumberValue = 22;
sheet.Range.get("B7").NumberValue = 28;
// 添加折线图并设置数据区域
let chart = sheet.Charts.Add({ chartType: xlsModule.ExcelChartType.LineMarkers });
chart.DataRange = sheet.Range.get("B1:B7");
chart.SeriesDataFromRange = false;
// 设置图表位置
chart.TopRow = 5;
chart.BottomRow = 26;
chart.LeftColumn = 2;
chart.RightColumn = 11;
// 配置图表标题
chart.ChartTitle = "Data Labels Demo";
chart.ChartTitleArea.IsBold = true;
chart.ChartTitleArea.Size = 12;
// 绑定分类标签
let cs1 = chart.Series.get(0);
cs1.CategoryLabels = sheet.Range.get("A2:A7");
// 设置数据标签的显示内容：显示数值、系列名称和类别名称
cs1.DataPoints.DefaultDataPoint.DataLabels.HasValue = true;
cs1.DataPoints.DefaultDataPoint.DataLabels.HasSeriesName = true;
cs1.DataPoints.DefaultDataPoint.DataLabels.HasCategoryName = true;
// 设置数据标签的分隔符
cs1.DataPoints.DefaultDataPoint.DataLabels.Delimiter = ". ";
// 自定义数据标签的字体样式
cs1.DataPoints.DefaultDataPoint.DataLabels.Size = 9;
cs1.DataPoints.DefaultDataPoint.DataLabels.Color = xlsModule.Color.get_Red();
cs1.DataPoints.DefaultDataPoint.DataLabels.FontName = "Calibri";
cs1.DataPoints.DefaultDataPoint.DataLabels.IsBold = true;
// 保存工作簿
const outputFileName = 'DataLabelContentAndFont.xlsx';
workbook.SaveToFile(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>Set Data Label Content and Font</h1>
<button onClick={setDataLabelContentAndFont}>
Generate
</button>
</div>
);
}
export default App;
使用 Spire.XLS for JavaScript 设置数据标签内容与字体后的效果
调整数据标签的位置与外观
除了显示内容和字体样式外，数据标签的位置和外观也是图表美化的重要方面。Spire.XLS for JavaScript 支持通过 DataLabelPositionType 枚举调整数据标签的显示位置，并且可以为数据标签设置填充颜色、边框样式以及阴影效果。具体操作步骤如下：
- 创建
Workbook对象并加载包含图表的已有 Excel 文件。 - 通过
workbook.Worksheets.get()获取工作表。 - 使用
sheet.Charts.get()获取图表对象。 - 遍历图表的数据系列，通过
DataLabels.Position设置数据标签的位置。 - 通过
FrameFormat.Fill为数据标签设置背景填充颜色。 - 通过
FrameFormat.Border为数据标签设置边框颜色和样式。 - 通过
FrameFormat.Shadow为数据标签添加阴影效果（类型、颜色、透明度、大小、模糊度、角度和距离）。 - 使用
SaveToFile()保存工作簿为 Excel 文件。
下面是一个完整的代码示例，展示了在 React 中调整图表数据标签的位置与外观：
function App() {
const setDataLabelPositionAndAppearance = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将示例文件加载到虚拟文件系统（VFS）
let excelFileName = 'SampleChart.xlsx';
await window.spire.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}data/`);
// 创建新工作簿并加载已有文件
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: excelFileName });
// 获取第一个工作表
let sheet = workbook.Worksheets.get(0);
// 获取第一个图表
let chart = sheet.Charts.get(0);
// 遍历所有数据系列，调整数据标签的位置和外观
for (let i = 0; i < chart.Series.Count; i++) {
let cs = chart.Series.get(i);
// 设置数据点标记样式和大小，使数据点更突出
cs.DataFormat.MarkerSize = 6;
cs.DataFormat.MarkerStyle = xlsModule.ChartMarkerType.Circle;
cs.DataFormat.MarkerForegroundColor = xlsModule.Color.get_Blue();
cs.DataFormat.MarkerBackgroundColor = xlsModule.Color.get_White();
let dataLabels = cs.DataPoints.DefaultDataPoint.DataLabels;
// 启用数值标签
dataLabels.HasValue = true;
// 设置数据标签位置
dataLabels.Position = xlsModule.DataLabelPositionType.Right;
// 设置数据标签的字体颜色和大小
dataLabels.Color = xlsModule.Color.get_Blue();
dataLabels.Size = 10;
// 设置粉红色填充背景
dataLabels.FrameFormat.Fill.FillType = xlsModule.ShapeFillType.SolidColor;
dataLabels.FrameFormat.ForeGroundColor = xlsModule.Color.get_Pink();
// 设置红色边框
dataLabels.FrameFormat.Border.Pattern = xlsModule.ChartLinePatternType.Solid;
dataLabels.FrameFormat.Border.Color = xlsModule.Color.get_Red();
// 设置黄色阴影效果
dataLabels.FrameFormat.Shadow.ShadowOuterType = xlsModule.XLSXChartShadowOuterType.OffsetDiagonalBottomLeft;
dataLabels.FrameFormat.Shadow.Color = xlsModule.Color.get_Yellow();
dataLabels.FrameFormat.Shadow.Transparency = 0;
dataLabels.FrameFormat.Shadow.Size = 10;
dataLabels.FrameFormat.Shadow.Blur = 2;
dataLabels.FrameFormat.Shadow.Angle = 45;
dataLabels.FrameFormat.Shadow.Distance = 8;
}
// 保存工作簿
const outputFileName = 'DataLabelPositionAndAppearance.xlsx';
workbook.SaveToFile(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>Set Data Label Position and Appearance</h1>
<button onClick={setDataLabelPositionAndAppearance}>
Generate
</button>
</div>
);
}
export default App;
使用 Spire.XLS for JavaScript 调整数据标签位置与外观后的效果
常见问题
如何只修改某个特定数据点的标签内容，而不是修改整个系列？
原因：DefaultDataPoint.DataLabels 作用于系列中所有数据点，无法单独控制单个数据点。
解决：通过 DataPoints.get(index) 获取指定数据点，再设置其标签：
// 修改第三个数据点的标签文字
chart.Series.get(0).DataPoints.get(2).DataLabels.Text = "峰值";
chart.Series.get(0).DataPoints.get(2).DataLabels.HasValue = false;
如何为数据标签设置数字格式（如小数位数、货币符号）
原因：数据标签显示的数字格式默认与单元格格式一致，但有时需要单独控制。
解决：使用 DataLabels.NumberFormat 属性自定义数字格式：
// 显示两位小数
dataLabels.NumberFormat = "0.00";
// 显示为百分比
dataLabels.NumberFormat = "0.0%";
// 显示为带货币符号的格式
dataLabels.NumberFormat = "¥#,##0";
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
