JavaScriptを使って日本地域用のチャートを画像に変換（C++経由）
Contents
[
Hide
]
このトピックでは、チャートの日本語地域を設定する方法を説明します。
継承クラスを定義する
最初のステップでは、ChartGlobalizationSettingsから継承する"ChartJapaneseSettings"クラスを定義する必要があります。
その後、関連する関数を書き換えることで、チャート要素のテキストを独自の言語で設定できます。
コード例:
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Chart Globalization - Japanese 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");
});
// Converted class from JavaScript to browser-compatible JavaScript
class ChartJapaneseSettings extends AsposeCells.ChartGlobalizationSettings {
constructor() {
super();
// Parameterless getters converted to properties
this.axisTitleName = "軸タイトル";
this.chartTitleName = "グラフ タイトル";
this.legendDecreaseName = "削減";
this.legendIncreaseName = "ぞうか";
this.legendTotalName = "すべての";
this.otherName = "その他";
this.seriesName = "シリーズ";
}
// Getter with parameter converted to a method with lowercase first letter (no 'get' prefix)
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 "10万";
case AsposeCells.DisplayUnitType.Millions:
return "百万";
case AsposeCells.DisplayUnitType.TenMillions:
return "千万";
case AsposeCells.DisplayUnitType.HundredMillions:
return "億";
case AsposeCells.DisplayUnitType.Billions:
return "10億";
case AsposeCells.DisplayUnitType.Trillions:
return "兆";
default:
return '';
}
}
}
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file (optional for this demo).</p>';
return;
}
// No try-catch per instructions; let errors propagate
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Example usage: instantiate the ChartJapaneseSettings and demonstrate properties/methods
const settings = new ChartJapaneseSettings();
// Example: show axis title name and chart title name and a sample axis unit name
const axisTitle = settings.axisTitleName;
const chartTitle = settings.chartTitleName;
const sampleUnit = settings.axisUnitName(AsposeCells.DisplayUnitType.Thousands);
document.getElementById('result').innerHTML = `
<p><strong>axisTitleName:</strong> ${axisTitle}</p>
<p><strong>chartTitleName:</strong> ${chartTitle}</p>
<p><strong>axisUnitName(DisplayUnitType.Thousands):</strong> ${sampleUnit}</p>
<p style="color: green;">ChartJapaneseSettings instantiated successfully.</p>
`;
// Additionally, demonstrate opening the provided file as a Workbook (no modifications)
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Prepare a simple save to allow downloading the opened file back (unchanged)
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 Resulting Excel File';
});
</script>
</html>
チャートの日本語設定を構成する
このステップでは、前のステップで定義した"ChartJapaneseSettings"クラスを使用します。
コード例:
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Chart to Image</title>
</head>
<body>
<h1>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, Worksheet, Cell, Utils, ChartJapaneseSettings } = 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');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiating a Workbook object from the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Apply Japanese chart settings
workbook.settings.globalizationSettings.chartSettings = new ChartJapaneseSettings();
// Access the first chart in the first worksheet
const chart0 = workbook.worksheets.get(0).charts.get(0);
// Convert chart to image (PNG)
const imageData = chart0.toImage(SaveFormat.Png);
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';
document.getElementById('result').innerHTML = '<p style="color: green;">Chart converted to image successfully! Click the download link to get the image.</p>';
});
</script>
</html>
その後、出力イメージで効果を確認できます。チャートの要素は、設定に従ってレンダリングされます。
結論
この例では、チャートに日本の地域を設定しないと、次のチャート要素がデフォルト言語(英語など)でレンダリングされる可能性があります。
上記の操作の後、日本の地域で出力されたチャート画像を取得できます。
| サポートされる要素 | この例の値 | 英語環境のデフォルト値 |
|---|---|---|
| 軸タイトル名 | 軸タイトル | Axis Title |
| 軸単位名 | 百,千… | Hundreds, Thousands… |
| グラフタイトル名 | グラフ タイトル | Chart Title |
| 凡例増加名 | ぞうか | Increase |
| 凡例減少名 | 削減 | Decrease |
| 凡例全体名 | すべての | Total |
| その他の名前 | その他 | Other |
| 系列名 | シリーズ | Series |