Konvertieren Sie ein Excel Diagramm mit JavaScript über C++ in ein Bild
Diagramme sind optisch ansprechend und erleichtern es den Benutzern, Vergleiche, Muster und Trends in Daten zu erkennen. Anstelle von Spalten von Arbeitsblattnummern zu analysieren, zeigt ein Diagramm auf einen Blick, ob die Verkäufe sinken oder steigen oder wie die tatsächlichen Verkäufe im Vergleich zu den prognostizierten Verkäufen stehen. Menschen werden häufig gebeten, statistische und graphische Informationen in einem leicht verständlichen und leicht zu pflegenden Format zu präsentieren. Ein Bild hilft.
Manchmal werden Diagramme in Anwendungen oder Webseiten benötigt. Oder es ist für ein Word-Dokument, eine PDF-Datei, eine PowerPoint-Präsentation oder eine andere Anwendung erforderlich. In jedem Fall möchten Sie das Diagramm als Bild rendern, um es anderweitig zu verwenden.
Das Umwandeln von Diagrammen in Bilder
In den Beispielen hier werden ein Kreisdiagramm und ein Säulendiagramm in Bilder umgewandelt.
Umwandeln eines Tortendiagramms in eine Bilddatei
Erstellen Sie zuerst ein Kreisdiagramm in Microsoft Excel und konvertieren Sie es anschließend mit Aspose.Cells for JavaScript über C++ in eine Bilddatei. Das Beispiel erstellt ein EMF-Bild basierend auf dem Kreisdiagramm in der Vorlage für Microsoft Excel.
| Ausgabe: Bild des Tortendiagramms |
|---|
![]() |
- Erstellen Sie ein Kreisdiagramm in Microsoft Excel:
- Öffnen Sie eine neue Arbeitsmappe in Microsoft Excel.
- Geben Sie einige Daten in ein Arbeitsblatt ein.
- Erstellen Sie ein Kreisdiagramm basierend auf den Daten.
- Speichern Sie die Datei.
| Die Eingabedatei. |
|---|
![]() |
- Laden Sie Aspose.Cells herunter und installieren Sie es:
- Laden Sie Aspose.Cells for JavaScript via C++ herunter.
- Installieren Sie es auf Ihrem Entwicklungscomputer.
Alle Aspose Komponenten arbeiten im Evaluierungsmodus, wenn sie zuerst installiert werden. Der Evaluierungsmodus hat kein Zeitlimit und fügt nur Wasserzeichen in Ausgabedokumente ein.
- Ein Projekt erstellen:
- Starten Sie Ihre bevorzugte IDE.
- Erstellen Sie eine neue Konsolenanwendung. Dieses Beispiel verwendet eine JavaScript-Anwendung, aber Sie können sie mit jeder JavaScript-Laufzeitumgebung erstellen.
- Fügen Sie eine Referenz hinzu. Dieses Projekt verwendet Aspose.Cells, also fügen Sie eine Referenz zu Aspose.Cells for JavaScript über C++ hinzu.
- Schreiben Sie den Code, der das Diagramm findet und konvertiert. Unten ist der vom Komponenten verwendete Code, um die Aufgabe zu erledigen. Sehr wenige Zeilen Code werden verwendet.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Convert 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, Utils } = 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));
// Get the designer chart (first chart) in the first worksheet of the workbook.
const chart = workbook.worksheets.get(0).charts.get(0);
// Convert the chart to an image (EMF) and prepare download link
const imageData = chart.toImage(AsposeCells.ImageType.Emf);
const blob = new Blob([imageData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'PieChart.out.emf';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Chart Image';
document.getElementById('result').innerHTML = '<p style="color: green;">Chart converted to EMF successfully! Click the download link to get the image.</p>';
});
</script>
</html>
Ein Säulendiagramm in eine Bilddatei konvertieren
Erstellen Sie zuerst ein Säulendiagramm in Microsoft Excel und konvertieren Sie es in eine Bilddatei, wie oben beschrieben. Nach der Ausführung des Beispielcodes wird eine JPEG-Datei basierend auf dem Säulendiagramm in der Vorlage Excel-Datei erstellt.
| Ausgabedatei: ein Säulendiagrammbild. |
|---|
![]() |
- Erstellen Sie ein Säulendiagramm in Microsoft Excel:
- Öffnen Sie eine neue Arbeitsmappe in Microsoft Excel.
- Geben Sie einige Daten in ein Arbeitsblatt ein.
- Erstellen Sie ein Säulendiagramm basierend auf den Daten.
- Speichern Sie die Datei.
| Eingabedatei. |
|---|
![]() |
- Richten Sie ein Projekt mit den oben beschriebenen Referenzen ein.
- Konvertieren Sie das Diagramm dynamisch in ein Bild. Im Folgenden ist der vom Komponenten verwendete Code, um die Aufgabe zu erledigen. Der Code ist ähnlich zu dem vorherigen:
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Convert Chart to Image</title>
</head>
<body>
<h1>Convert Chart to Image</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, ImageType, Utils } = 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 (first chart) in the first worksheet of the workbook.
const chart = workbook.worksheets.get(0).charts.get(0);
// Convert the chart to an image (JPEG)
const imageData = await chart.toImage(ImageType.Jpeg);
// Create a Blob and provide a download link
const blob = new Blob([imageData], { type: 'image/jpeg' });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'ColumnChart.out.jpeg';
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>



