使用 JavaScript 通过 C++ 将图表转换为图片以适应中国地区
Contents
[
Hide
]
在本主题中，我们将向您展示如何为图表设置中国区域。
定义继承类
第一步，你需要定义一个继承自ChartGlobalizationSettings的类"ChartChineseSetttings"。
然后，通过重写相关函数，您可以将图表元素的文本设置为您自己的语言。
代码示例:
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Chart Globalization Settings (Chinese) Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, Worksheet, Cell, Utils } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
class ChartChineseSettings extends AsposeCells.ChartGlobalizationSettings {
get axisTitleName() {
return "坐标轴标题";
}
axisUnitName(type) {
switch (type) {
case AsposeCells.DisplayUnitType.None:
return '';
case AsposeCells.DisplayUnitType.Hundreds:
return '百';
case AsposeCells.DisplayUnitType.Thousands:
return '千';
case AsposeCells.DisplayUnitType.TenThousands:
return '万';
case AsposeCells.DisplayUnitType.HundredThousands:
return '十万';
case AsposeCells.DisplayUnitType.Millions:
return '百万';
case AsposeCells.DisplayUnitType.TenMillions:
return '千万';
case AsposeCells.DisplayUnitType.HundredMillions:
return '亿';
case AsposeCells.DisplayUnitType.Billions:
return '十亿';
case AsposeCells.DisplayUnitType.Trillions:
return '兆';
default:
return '';
}
}
get chartTitleName() {
return "图表标题";
}
get legendDecreaseName() {
return "减少";
}
get legendIncreaseName() {
return "增加";
}
get legendTotalName() {
return "汇总";
}
get otherName() {
return "其他";
}
get seriesName() {
return "系列";
}
}
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
const resultDiv = document.getElementById('result');
if (!fileInput.files.length) {
resultDiv.innerHTML = '<p style="color: red;">Please select an Excel file (optional). This example will demonstrate the ChartChineseSettings regardless.</p>';
}
const settings = new ChartChineseSettings();
const lines = [];
lines.push(`<p><strong>axisTitleName:</strong> ${settings.axisTitleName}</p>`);
lines.push(`<p><strong>chartTitleName:</strong> ${settings.chartTitleName}</p>`);
lines.push(`<p><strong>legendDecreaseName:</strong> ${settings.legendDecreaseName}</p>`);
lines.push(`<p><strong>legendIncreaseName:</strong> ${settings.legendIncreaseName}</p>`);
lines.push(`<p><strong>legendTotalName:</strong> ${settings.legendTotalName}</p>`);
lines.push(`<p><strong>otherName:</strong> ${settings.otherName}</p>`);
lines.push(`<p><strong>seriesName:</strong> ${settings.seriesName}</p>`);
lines.push(`<p><strong>axisUnitName (Thousands):</strong> ${settings.axisUnitName(AsposeCells.DisplayUnitType.Thousands)}</p>`);
lines.push(`<p><strong>axisUnitName (Millions):</strong> ${settings.axisUnitName(AsposeCells.DisplayUnitType.Millions)}</p>`);
resultDiv.innerHTML = lines.join('');
// If a file is provided, demonstrate opening it and (optionally) applying the settings.
if (fileInput.files.length) {
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Apply the globalization settings to the workbook's chart globalization settings if available
// (some environments may expose different integration points; this demonstrates usage)
if (workbook.chartGlobalizationSettings !== undefined) {
workbook.chartGlobalizationSettings = settings;
}
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
}
});
</script>
</html>
为图表配置中文设置
在这一步，您将使用在前一步中定义的类 “ChartChineseSetttings”。
代码示例:
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Export Chart to Image Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, ChartChineseSetttings } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
const resultDiv = document.getElementById('result');
if (!fileInput.files.length) {
resultDiv.innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiate Workbook from uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Apply Chinese chart globalization settings
workbook.settings.globalizationSettings = new ChartChineseSetttings();
// Access the first worksheet and first chart
const worksheet = workbook.worksheets.get(0);
const chart0 = worksheet.charts.get(0);
// Export chart to image (PNG)
const imageData = chart0.toImage(SaveFormat.Png);
// Create downloadable blob and link
const blob = new Blob([imageData], { type: 'image/png' });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'Output.png';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Chart Image';
resultDiv.innerHTML = '<p style="color: green;">Chart exported successfully! Click the download link to save the PNG.</p>';
});
</script>
</html>
然后，您可以在输出图像中看到效果，图表中的元素将根据您的设置进行渲染。
结论
在这个示例中，如果不为图表设置中国区域，则以下图表元素可能以默认语言（例如英语）渲染。
在上述操作之后，我们可以获得一个带有中国区域的输出图表图片。
| 支持的元素 | 本示例中的值 | 英文环境中的默认值 |
|---|---|---|
| 轴标题名称 | 坐标轴标题 | Axis Title |
| 轴单位名称 | 百,千… | Hundreds, Thousands… |
| 图表标题 | 图表标题 | |
| 增加 | 增加 | |
| 减少 | 减少 | |
| 汇总 | 汇总 | |
| 其他 | 其他 | |
| 系列 | 系列 |