Conversion d’un graphique en image avec JavaScript via C++
Contents
[
Hide
]
Rendu des graphiques
Les API Aspose.Cells supportent la conversion de graphiques Excel en formats d’image sans nécessiter d’outils ou d’applications supplémentaires. Afin d’offrir une prise en charge du rendu, la classe Chart expose des méthodes toImage(string) avec différentes surcharge pour mieux répondre aux besoins de l’application.
Rendu des graphiques en images
La méthode Chart.toImage(string) possède plusieurs surcharges pour supporter un rendu simple ainsi qu’un rendu avancé. Si l’exigence de l’application est de rendre le graphique dans ses dimensions par défaut, nous suggérons d’utiliser la méthode Chart.toImage(string) comme suit.
<!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>
Il est également possible de rendre les graphiques en images avec des paramètres avancés. Les API Aspose.Cells ont exposé une surcharge de la méthode Chart.toImage(string) qui accepte une instance de ImageOrPrintOptions, tout en permettant de spécifier des paramètres tels que la résolution, le mode de lissage, le format d’image, etc.
<!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>
Types de graphiques supportés pour le rendu
Il existe quelques types de graphiques qui ne sont actuellement pas pris en charge pour le rendu. Ces types de graphiques contiennent N dans la colonne Pris en charge du tableau ci-dessous.
| Type de graphique | Sous-type de graphique | Pris en charge |
|---|---|---|
| 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 |
Dans le cas où vous tenteriez de rendre les types de graphiques non pris en charge en image ou en PDF, vous pourriez obtenir des images de taille 0 ou un PDF vierge.