Imposta immagine come riempimento di sfondo nel grafico con JavaScript tramite C++

Aspose.Cells ti permette di impostare un gradiente, una texture, un motivo o un’immagine come effetti di riempimento per diversi oggetti, come l’area di trama, l’area del grafico o la casella della legenda di un grafico. Questo documento mostra come aggiungere un’immagine allo sfondo di un grafico.

Per fare ciò, Aspose.Cells fornisce la proprietà Chart.plotArea. Il seguente codice di esempio dimostra l’uso della proprietà Chart.plotArea per impostare un’immagine come riempimento di sfondo nel grafico.

Codice JavaScript per impostare l’immagine come riempimento di sfondo nel grafico

<!DOCTYPE html>
<html>
    <head>
        <title>Aspose.Cells Example</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>Aspose.Cells Column Chart Example</h1>
        <p>
            Select an Excel file (sample.xlsx) and an optional image (aspose.png) for chart fill:
        </p>
        <input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
        <input type="file" id="imageInput" accept="image/*" />
        <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');
            const imageInput = document.getElementById('imageInput');
            const resultDiv = document.getElementById('result');
            const downloadLink = document.getElementById('downloadLink');

            if (!fileInput.files.length) {
                resultDiv.innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
                return;
            }

            // Read Excel file
            const file = fileInput.files[0];
            const arrayBuffer = await file.arrayBuffer();
            const workbook = new Workbook(new Uint8Array(arrayBuffer));

            // Get the first worksheet and set its name to "Data"
            let sheet = workbook.worksheets.get(0);
            sheet.name = "Data";

            // Get the cells collection in the sheet.
            const cells = workbook.worksheets.get(0).cells;

            // Put some values into cells of the Data sheet.
            let cell;
            cell = cells.get("A1"); cell.value = "Region";
            cell = cells.get("A2"); cell.value = "France";
            cell = cells.get("A3"); cell.value = "Germany";
            cell = cells.get("A4"); cell.value = "England";
            cell = cells.get("A5"); cell.value = "Sweden";
            cell = cells.get("A6"); cell.value = "Italy";
            cell = cells.get("A7"); cell.value = "Spain";
            cell = cells.get("A8"); cell.value = "Portugal";
            cell = cells.get("B1"); cell.value = "Sale";
            cell = cells.get("B2"); cell.value = 70000;
            cell = cells.get("B3"); cell.value = 55000;
            cell = cells.get("B4"); cell.value = 30000;
            cell = cells.get("B5"); cell.value = 40000;
            cell = cells.get("B6"); cell.value = 35000;
            cell = cells.get("B7"); cell.value = 32000;
            cell = cells.get("B8"); cell.value = 10000;

            // Add a chart sheet.
            let sheetIndex = workbook.worksheets.add(AsposeCells.SheetType.Chart);
            sheet = workbook.worksheets.get(sheetIndex);

            // Set the name of worksheet
            sheet.name = "Chart";

            // Create chart
            let chartIndex = sheet.charts.add(AsposeCells.ChartType.Column, 1, 1, 25, 10);
            const chart = sheet.charts.get(chartIndex);

            // Set some properties of chart plot area.
            // If an image was provided, set it as fill format and make the border invisible.
            if (imageInput.files.length) {
                const imgFile = imageInput.files[0];
                const imgBuffer = await imgFile.arrayBuffer();
                const imgBytes = new Uint8Array(imgBuffer);
                chart.plotArea.area.fillFormat.imageData = imgBytes;
            }
            chart.plotArea.border.isVisible = false;

            // Set properties of chart title
            chart.title.text = "Sales By Region";
            chart.title.font.color = AsposeCells.Color.Blue;
            chart.title.font.isBold = true;
            chart.title.font.size = 12;

            // Set properties of nseries
            chart.nSeries.add("Data!B2:B8", true);
            chart.nSeries.categoryData = "Data!A2:A8";
            chart.nSeries.isColorVaried = true;

            // Set the Legend.
            const legend = chart.legend;
            legend.position = AsposeCells.LegendPositionType.Top;

            // Save the excel file
            const outputData = workbook.save(SaveFormat.Excel97To2003);
            const blob = new Blob([outputData]);
            downloadLink.href = URL.createObjectURL(blob);
            downloadLink.download = 'column_chart_out.xls';
            downloadLink.style.display = 'block';
            downloadLink.textContent = 'Download Excel File';

            resultDiv.innerHTML = '<p style="color: green;">Operation completed successfully! Click the download link to get the modified file.</p>';
        });
    </script>
</html>

Imposta il codice di formato dei valori delle serie del grafico con JavaScript tramite C++