Forme nei Grafici con JavaScript tramite C++
Aggiunta del Controllo Etichetta al Grafico
Le etichette forniscono un modo per fornire informazioni agli utenti sul contenuto di un foglio di calcolo. Aspose.Cells consente di aggiungere e manipolare le etichette anche nei grafici.
La classe ShapeCollection fornisce un metodo chiamato addLabelInChart(number, number, number, number), utilizzato per aggiungere un controllo etichetta a un grafico. Di seguito è riportato un elenco dei parametri utilizzati per il metodo:
- top – lo spostamento verticale dell’etichetta dall’angolo in alto a sinistra in unità dello 1/4000 dell’area del grafico.
- sinistra – lo spostamento verticale dell’etichetta dall’angolo in alto a sinistra in unità dello 1/4000 dell’area del grafico.
- altezza – l’altezza dell’etichetta, in unità dello 1/4000 dell’area del grafico.
- larghezza – la larghezza dell’etichetta, in unità dello 1/4000 dell’area del grafico.
Il metodo restituisce l’oggetto Label. La classe Label rappresenta un’etichetta nel grafico. Ha alcuni membri importanti:
- text (proprietà) – specifica una stringa di sottotitolo dell’etichetta.
- fill (proprietà) – specifica gli attributi del colore di riempimento.
L’esempio seguente mostra come aggiungere un’etichetta al grafico. L’esempio utilizza un file di progettazione (exp_piechart.xls) che ha un grafico al suo interno. Usiamo questo file per inserire un’etichetta nel grafico. Di seguito è riportato il codice originale per aggiungere un’etichetta al grafico. L’output seguente viene generato durante l’esecuzione del codice.
<!DOCTYPE html>
<html>
<head>
<title>Add Label In Chart Example</title>
</head>
<body>
<h1>Add Label In Chart 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 by opening the Excel file from the 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);
// Add a new label to the chart.
const label = chart.shapes.addLabelInChart(100, 100, 350, 900);
// Set the caption of the label.
label.text = "A Label In Chart";
// Set the Placement Type, the way the Label is attached to the cells.
label.placement = AsposeCells.PlacementType.FreeFloating;
// Save the excel file and provide a 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 = 'chart.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Label added successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Aggiunta del controllo TextBox al grafico
Un modo per evidenziare informazioni importanti in un report è utilizzare una casella di testo. Ad esempio, inserire del testo per evidenziare il nome dell’azienda o per indicare la regione geografica con le vendite più alte. La classe ShapeCollection fornisce un metodo chiamato addTextBoxInChart(number, number, number, number), che viene utilizzato per aggiungere un controllo casella di testo a un grafico. Di seguito è riportato l’elenco dei parametri utilizzati per il metodo:
- top – lo spostamento verticale della casella di testo dall’angolo in alto a sinistra in unità di 1/4000 dell’area del grafico.
- left – lo spostamento verticale della casella di testo dall’angolo in alto a sinistra in unità di 1/4000 dell’area del grafico.
- height – l’altezza della casella di testo, in unità di 1/4000 dell’area del grafico.
- width – la larghezza della casella di testo, in unità di 1/4000 dell’area del grafico.
Il metodo restituisce un oggetto TextBox. La classe TextBox rappresenta una casella di testo nel grafico.
L’esempio seguente mostra come aggiungere una casella di testo a un grafico. L’esempio utilizza il file di progettazione precedente (exp_piechart.xls) che contiene un grafico. Utilizziamo questo file per inserire una casella di testo nel grafico per mostrare il titolo del grafico. Di seguito è riportato il codice originale per aggiungere una casella di testo al grafico.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells 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();
// Opening the Excel file through the file stream
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);
// Add a new textbox to the chart.
const textbox0 = chart.shapes.addTextBoxInChart(100, 1100, 350, 2550);
// Fill the text.
textbox0.text = "Sales By Region";
// Get the textbox text frame.
// const textframe0 = textbox0.textFrame;
// Set the textbox to adjust it according to its contents.
// textframe0.autoSize = true;
// Set the font color.
textbox0.font.color = AsposeCells.Color.Maroon;
// Set the font to bold.
textbox0.font.isBold = true;
// Set the font size.
textbox0.font.size = 14;
// Set font attribute to italic.
textbox0.font.isItalic = true;
// Get the fill format of the textbox.
const fillformat = textbox0.fill;
// Get the line format type of the textbox.
const lineformat = textbox0.line;
// Set the line weight.
lineformat.weight = 2;
// Set the dash style to solid.
lineformat.dashStyle = AsposeCells.MsoLineDashStyle.Solid;
// Save 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 = 'chart.out.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>
Aggiunta di un’immagine al grafico
Aspose.Cells consente di inserire immagini in un grafico. Ad esempio, aggiungi un’immagine per enfatizzare o dare più significato a un grafico o ai suoi contenuti, o inserisci un file immagine del marchio.
La classe ShapeCollection fornisce un metodo chiamato addPictureInChart(number, number, Uint8Array, number, number), che viene utilizzato per aggiungere un oggetto immagine al grafico. Di seguito è riportato l’elenco dei parametri utilizzati per il metodo:
- top – lo spostamento verticale dell’immagine dall’angolo in alto a sinistra in unità di 1/4000 dell’area del grafico.
- left – lo spostamento verticale dell’immagine dall’angolo in alto a sinistra in unità di 1/4000 dell’area del grafico.
- stream – un oggetto stream che contiene i dati dell’immagine.
- widthScale – la scala della larghezza dell’immagine, un valore percentuale.
- heightScale – la scala dell’altezza dell’immagine, un valore percentuale.
Il metodo restituisce un oggetto Picture. La classe Picture rappresenta un oggetto immagine nel grafico.
L’esempio seguente mostra come aggiungere un’immagine al grafico. L’esempio utilizza il file di progettazione precedente (exp_piechart.xls) che contiene un grafico. Utilizziamo questo file per inserire un’immagine nel grafico. Di seguito è riportato il codice originale per aggiungere un’immagine al grafico.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example - Add Picture to Chart</title>
</head>
<body>
<h1>Add Picture to Chart Example</h1>
<p>Select an Excel file and an image to add to the first chart in the first worksheet.</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 } = 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');
if (!fileInput.files.length || !imageInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file and an image file.</p>';
return;
}
const file = fileInput.files[0];
const imageFile = imageInput.files[0];
const arrayBuffer = await file.arrayBuffer();
const imageBuffer = await imageFile.arrayBuffer();
// Instantiating a Workbook object from the uploaded Excel file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Get the designer chart in the first sheet.
const sheet = workbook.worksheets.get(0);
const chart = sheet.charts.get(0);
// Add a new picture to the chart.
const pic0 = chart.shapes.addPictureInChart(50, 50, new Uint8Array(imageBuffer), 40, 40);
// Get the lineformat type of the picture.
const lineformat = pic0.line;
// Set the dash style.
lineformat.dashStyle = AsposeCells.MsoLineDashStyle.Solid;
// Set the line weight.
lineformat.weight = 4;
// Save the modified Excel file and provide a 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 = 'chart.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Picture added to chart successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Aggiunta di una casella di controllo nel grafico
Aspose.Cells consente di inserire caselle di controllo in un foglio grafico utilizzando l’enumerazione MsoDrawingType. L’esempio seguente illustra come aggiungere una casella di controllo a un foglio grafico.
L’immagine seguente mostra il foglio di lavoro del grafico con la casella di controllo nel file di output.
Il file di output generato dal frammento di codice seguente è allegato per il tuo riferimento.
<!DOCTYPE html>
<html>
<head>
<title>Insert Checkbox in Chart Sheet Example</title>
<meta charset="utf-8" />
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
#downloadLink { display: none; margin-top: 10px; display: inline-block; }
#result p { margin: 8px 0; }
</style>
</head>
<body>
<h1>Insert Checkbox in Chart Sheet Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink">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 resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
// This example creates a new workbook and inserts a chart sheet with a checkbox in the chart.
// The file input is optional for this example (a new workbook is created regardless).
// Instantiating a Workbook object
const workbook = new Workbook();
// Adding a chart sheet to the workbook
const index = workbook.worksheets.add(AsposeCells.SheetType.Chart);
// Access the newly added chart sheet
const sheet = workbook.worksheets.get(index);
// Add a floating column chart to the chart sheet
sheet.charts.addFloatingChart(AsposeCells.ChartType.Column, 0, 0, 1024, 960);
// Add nSeries to the chart (single series with values 1,2,3)
sheet.charts.get(0).nSeries.add("{1,2,3}", false);
// Add checkbox to the chart
sheet.charts.get(0).shapes.addShapeInChart(AsposeCells.MsoDrawingType.CheckBox, AsposeCells.PlacementType.Move, 400, 400, 1000, 600);
// Set text of the checkbox shape
sheet.charts.get(0).shapes.get(0).text = "CheckBox 1";
// Save the workbook to XLSX format and provide a download link
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'InsertCheckboxInChartSheet_out.xlsx';
downloadLink.style.display = 'inline-block';
downloadLink.textContent = 'Download Excel File';
resultDiv.innerHTML = '<p style="color: green;">Chart sheet with checkbox created successfully! Click the download link to get the file.</p>';
});
</script>
</html>