Position, Größe und Designer Diagramm mit JavaScript über C++ manipulieren
Contents
[
Hide
]
Chart-Position und Größe
Manchmal möchten Sie die Position oder Größe des neuen oder vorhandenen Diagramms innerhalb des Arbeitsblatts ändern. Aspose.Cells bietet die Eigenschaft Chart.chartObject dafür. Sie können seine Untereigenschaften verwenden, um das Diagramm mit neuer Höhe und Breite umzuistezen oder es mit neuen X- und Y-Koordinaten neu zu positionieren.
Steuerung der Diagrammposition und -größe
Um die Position (X, Y-Koordinaten) oder Größe (Höhe, Breite) des Diagramms zu ändern, verwenden Sie diese Eigenschaften:
Das folgende Beispiel erklärt die Verwendung der oben genannten APIs; es lädt die bestehende Arbeitsmappe, die ein Diagramm im ersten Arbeitsblatt enthält. Anschließend wird das Diagramm mit Aspose.Cells neu dimensioniert und neu positioniert.
<!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>
Manipulation von Designer-Diagrammen
Es gibt Situationen, in denen Sie Designer-Template-Dateien manipulieren oder ändern müssen. Aspose.Cells unterstützt die vollständige Manipulation von Designer-Diagramminhalten und -Elementen. Daten, Diagramminhalte, Hintergrundbild und Formatierung können präzise bewahrt werden.
Manipulation von Designer-Diagrammen in Vorlagendateien
Um Designer-Diagramme in Vorlage-Dateien zu manipulieren, verwenden Sie die Diagramm-bezogenen APIs. Zum Beispiel können Sie die Eigenschaft Worksheet.charts verwenden, um die vorhandene Diagrammsammlung in der Vorlage zu erhalten.
Erstellen eines Diagramms
Das folgende Beispiel zeigt, wie man ein Pyramiden-Diagramm erstellt. Wir werden dieses Diagramm später bearbeiten.
<!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>
Manipulation des Diagramms
Das folgende Beispiel zeigt, wie man das vorhandene Diagramm manipuliert. In diesem Beispiel ändern wir das oben erstellte Diagramm. In der generierten Ausgabe beachten Sie, dass das Datumslabel eines Datenpunkts auf ‘Vereinigtes Königreich, 30K’ gesetzt wurde.
<!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>
Manipulation eines Liniendiagramms in der Designer-Vorlage
In diesem Beispiel werden wir ein Liniendiagramm manipulieren. Wir werden einige Datenreihen zu dem vorhandenen Diagramm hinzufügen und deren Linienfarben ändern.
<!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>