Diagramm in Bild mit JavaScript über C++
Contents
[
Hide
]
Diagramme darstellen
Aspose.Cells APIs unterstützen die Konvertierung von Excel-Diagrammen in Bildformate, ohne dass zusätzliche Tools oder Anwendungen erforderlich sind. Um die Render-Unterstützung bereitzustellen, stellt die Chart Klasse die toImage(string) Methoden mit einer Vielzahl von Überladungen bereit, um den Anwendungsanforderungen gerecht zu werden.
Grafiken in Bilder umwandeln
Die Chart.toImage(string) Methode verfügt über eine Vielzahl von Überladungen, um einfache sowie fortgeschrittene Renderings zu unterstützen. Falls die Anforderung besteht, das Diagramm in seinen Standardabmessungen zu rendern, sollten Sie die Chart.toImage(string) Methode wie folgt verwenden.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells Chart to Image Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<br/><br/>
<a id="downloadLinkEMF" style="display: none; margin-right: 10px;">Download EMF Image</a>
<a id="downloadLinkBMP" style="display: none;">Download BMP Image</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, ChartType, ImageType } = 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 () => {
// This example does not require an input file; an empty workbook is created as in the original JavaScript example.
// Instantiating a Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its index to WorksheetCollection
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.Column, 5, 0, 15, 5);
// Accessing the instance of the newly added chart
const chart = worksheet.charts.get(chartIndex);
// Adding Series Collection (chart data source) to the chart ranging from "A1" cell to "B3"
chart.nSeries.add("A1:B3", true);
// Converting chart to image (EMF)
const emfData = chart.toImage(ImageType.Emf);
const emfBlob = new Blob([emfData], { type: "image/emf" });
const downloadLinkEMF = document.getElementById('downloadLinkEMF');
downloadLinkEMF.href = URL.createObjectURL(emfBlob);
downloadLinkEMF.download = 'chartEMF_out.emf';
downloadLinkEMF.style.display = 'inline-block';
downloadLinkEMF.textContent = 'Download EMF Image';
// Converting chart to Bitmap (BMP)
const bmpData = chart.toImage(ImageType.Bmp);
const bmpBlob = new Blob([bmpData], { type: "image/bmp" });
const downloadLinkBMP = document.getElementById('downloadLinkBMP');
downloadLinkBMP.href = URL.createObjectURL(bmpBlob);
downloadLinkBMP.download = 'chartBMP_out.bmp';
downloadLinkBMP.style.display = 'inline-block';
downloadLinkBMP.textContent = 'Download BMP Image';
document.getElementById('result').innerHTML = '<p style="color: green;">Chart images created. Click the download links to save them.</p>';
});
</script>
</html>
Es ist auch möglich, Diagramme mit erweiterten Einstellungen in Bilder zu rendern. Die Aspose.Cells APIs haben eine Überladungsvariante der Chart.toImage(string) Methode bereitgestellt, die eine Instanz von ImageOrPrintOptions akzeptiert und Parameter wie Auflösung, Glättungsmodus, Bildformat usw. festlegen kann.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Create Chart and Export as PNG</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, ImageOrPrintOptions, ImageFormat } = 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 () => {
// Creating a new Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its index to WorksheetCollection
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.Column, 5, 0, 15, 5);
// Accessing the instance of the newly added chart
const chart = worksheet.charts.get(chartIndex);
// Adding Series Collection (chart data source) to the chart ranging from "A1" cell to "B3"
chart.nSeries.add("A1:B3", true);
// Create an instance of ImageOrPrintOptions and set a few properties
const options = new ImageOrPrintOptions();
options.verticalResolution = 300;
options.horizontalResolution = 300;
options.imageFormat = ImageFormat.Png;
// Convert chart to image with additional settings
const imageData = chart.toImage(options);
const blob = new Blob([imageData], { type: 'image/png' });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'chartPNG_out.png';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Chart PNG';
document.getElementById('result').innerHTML = '<p style="color: green;">Chart exported successfully! Click the download link to get the image.</p>';
});
</script>
</html>
Unterstützte Diagrammtypen für die Darstellung
Einige Diagrammtypen werden derzeit nicht für die Darstellung unterstützt. Solche Diagrammtypen enthalten ein N in der Unterstützt-Spalte der unten stehenden Tabelle.
| Diagrammtyp | Diagramm-Subtyp | Unterstützt |
|---|---|---|
| Column | Column | Y |
| ColumnStacked | Y | |
| Column100PercentStacked | Y | |
| Column3DClustered | Y | |
| Column3DStacked | Y | |
| Column3D100PercentStacked | Y | |
| Column3D | Y | |
| Bar | Bar | Y |
| BarStacked | Y | |
| Bar100PercentStacked | Y | |
| Bar3DClustered | Y | |
| Bar3DStacked | Y | |
| Bar3D100PercentStacked | Y | |
| Line | Line | Y |
| LineStacked | Y | |
| Line100PercentStacked | Y | |
| LineWithDataMarkers | Y | |
| LineStackedWithDataMarkers | Y | |
| Line100PercentStackedWithDataMarkers | Y | |
| Line3D | Y | |
| Pie | Pie | Y |
| Pie3D | Y | |
| PiePie | Y | |
| PieExploded | Y | |
| Pie3DExploded | Y | |
| PieBar | Y | |
| Scatter | Scatter | Y |
| ScatterConnectedByCurvesWithDataMarker | Y | |
| ScatterConnectedByCurvesWithoutDataMarker | Y | |
| ScatterConnectedByLinesWithDataMarker | Y | |
| ScatterConnectedByLinesWithoutDataMarker | Y | |
| Area | Area | Y |
| AreaStacked | Y | |
| Area100PercentStacked | Y | |
| Area3D | Y | |
| Area3DStacked | Y | |
| Area3D100PercentStacked | Y | |
| Doughnut | Doughnut | Y |
| DoughnutExploded | Y | |
| Radar | Radar | Y |
| RadarWithDataMarkers | Y | |
| RadarFilled | Y | |
| Surface | Surface3D | N |
| SurfaceWireframe3D | N | |
| SurfaceContour | N | |
| SurfaceContourWireframe | N | |
| Bubble | Bubble | Y |
| Bubble3D | N | |
| Stock | StockHighLowClose | Y |
| StockOpenHighLowClose | Y | |
| StockVolumeHighLowClose | Y | |
| StockVolumeOpenHighLowClose | Y | |
| Cylinder | Cylinder | Y |
| CylinderStacked | Y | |
| Cylinder100PercentStacked | Y | |
| CylindricalBar | Y | |
| CylindricalBarStacked | Y | |
| CylindricalBar100PercentStacked | Y | |
| CylindricalColumn3D | Y | |
| Cone | Cone | Y |
| ConeStacked | Y | |
| Cone100PercentStacked | Y | |
| ConicalBar | Y | |
| ConicalBarStacked | Y | |
| ConicalBar100PercentStacked | Y | |
| ConicalColumn3D | Y | |
| Pyramid | Pyramid | Y |
| PyramidStacked | Y | |
| Pyramid100PercentStacked | Y | |
| PyramidBar | Y | |
| PyramidBarStacked | Y | |
| PyramidBar100PercentStacked | Y | |
| PyramidColumn3D | Y | |
| BoxWhisker | BoxWhisker | Y |
| Funnel | Funnel | Y |
| ParetoLine | ParetoLine | Y |
| Sunburst | Sunburst | Y |
| Treemap | Treemap | Y |
| Waterfall | Waterfall | Y |
| Histogram | Histogram | Y |
| Map | Map | N |
Wenn Sie versuchen, die nicht unterstützten Diagrammtypen als Bild oder PDF darzustellen, erhalten Sie möglicherweise Bilder mit der Größe 0 oder leere PDFs.