用JavaScript通过C++操作位置、大小和设计图表
Contents
[
Hide
]
图表位置和大小
有时，您可能需要改变工作表内新建或已有图表的位置或大小。Aspose.Cells提供了Chart.chartObject属性来实现。您可以使用其子属性重新调整图表的高度和宽度，或用新的X和Y坐标重新定位。
控制图表的位置和大小
要更改图表的位置（X、Y坐标）或大小（高度，宽度），请使用以下属性：
以下示例说明了上述 API 的用法；它加载包含图表的现有工作簿，然后使用 Aspose.Cells 重新调整图表的大小和位置。
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells Chart Resize and Reposition 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 } = 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();
// Instantiating a Workbook object by opening the Excel file from the file input
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Accessing the second worksheet in the Excel file (index 1)
const worksheet = workbook.worksheets.get(1);
// Load the chart from source worksheet (first chart)
const chart = worksheet.charts.get(0);
// Resize the chart
chart.chartObject.width = 400;
chart.chartObject.height = 300;
// Reposition the chart
chart.chartObject.x = 250;
chart.chartObject.y = 150;
// Saving the modified Excel file
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'chart.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
resultDiv.innerHTML = '<p style="color: green;">Chart resized and repositioned successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
操作设计图表
有时你需要操作或修改设计模板文件中的图表。Aspose.Cells 完全支持操控设计图表内容和元素。数据、图表内容、背景图片和格式都能精准保存。
在模板文件中操纵设计图表
要操作模板文件中的设计图表，使用图表相关的 API。例如，可以使用 Worksheet.charts 属性获取模板文件中的现有图表集合。
创建图表
以下示例显示了如何创建金字塔图表。稍后我们将操纵此图表。
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells - Create Workbook with Pyramid Chart</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, ChartType } = AsposeCells;
const readyPromise = 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 () => {
await readyPromise;
// Instantiating a Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Excel object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Adding sample values to cells
worksheet.cells.get("A1").value = 50;
worksheet.cells.get("A2").value = 100;
worksheet.cells.get("A3").value = 150;
worksheet.cells.get("B1").value = 4;
worksheet.cells.get("B2").value = 20;
worksheet.cells.get("B3").value = 50;
// Adding a chart to the worksheet
const chartIndex = worksheet.charts.add(ChartType.Pyramid, 5, 0, 15, 5);
// Accessing the instance of the newly added chart
const chart = worksheet.charts.get(chartIndex);
// Adding SeriesCollection (chart data source) to the chart ranging from "A1" cell to "B3"
chart.nSeries.add("A1:B3", true);
// Saving the Excel file
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created and chart added. Click the download link to get the file.</p>';
});
</script>
</html>
操作图表
以下示例显示了如何操纵现有的图表。在此示例中，我们修改了上面创建的图表。请注意，在生成的输出中，一个数据点的日期标签已设置为“United Kingdom, 30K”。
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Pie Chart Data Label Update</title>
</head>
<body>
<h1>Update Pie Chart Data Label 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 } = 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 uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Get the designer chart in the second sheet.
const sheet = workbook.worksheets.get(1);
const chart = sheet.charts.get(0);
// Get the data labels in the data series of the third data point.
const dataLabels = chart.nSeries.get(0).points.get(2).dataLabels;
// Change the text of the label.
dataLabels.text = "Unided Kingdom, 400K ";
// Save the modified Excel file
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Data label updated successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
在设计师模板中操作折线图
在这个例子中，我们将操作一个折线图。我们将向现有图表添加一些数据系列，并改变它们的线条颜色。
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells Chart Series 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 } = 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();
// Instantiate Workbook from uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Get the designer chart in the first worksheet.
const worksheet = workbook.worksheets.get(0);
const chart = worksheet.charts.get(0);
// Add the third data series to it.
chart.nSeries.add("{60, 80, 10}", true);
// Add another data series (fourth) to it.
chart.nSeries.add("{0.3, 0.7, 1.2}", true);
// Plot the fourth data series on the second axis.
chart.nSeries.get(3).plotOnSecondAxis = true;
// Change the Border color of the second data series.
chart.nSeries.get(1).border.color = AsposeCells.Color.Green;
// Change the Border color of the third data series.
chart.nSeries.get(2).border.color = AsposeCells.Color.Red;
// Make the second value axis visible.
chart.secondValueAxis.isVisible = true;
// Save the excel file and provide download link
const outputData = workbook.save(SaveFormat.Excel97To2003);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Operation completed successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>