Formas en Gráficos con JavaScript vía C++
Agregar control de etiqueta al gráfico
Las etiquetas proporcionan un medio para dar información a los usuarios sobre el contenido de la hoja de cálculo. Aspose.Cells le permite agregar y manipular etiquetas incluso en gráficos.
La clase ShapeCollection proporciona un método llamado addLabelInChart(number, number, number, number), utilizado para agregar un control de etiqueta a un gráfico. A continuación, se muestra una lista de los parámetros utilizados para el método:
- arriba – el desplazamiento vertical de la etiqueta desde la esquina superior izquierda en unidades de 1/4000 del área del gráfico.
- izquierda – el desplazamiento horizontal de la etiqueta desde la esquina superior izquierda en unidades de 1/4000 del área del gráfico.
- altura – la altura de la etiqueta, en unidades de 1/4000 del área del gráfico.
- ancho – el ancho de la etiqueta, en unidades de 1/4000 del área del gráfico.
El método devuelve un objeto Label. La clase Label representa una etiqueta en el gráfico. Tiene algunos miembros importantes:
- text (propiedad) - especifica la cadena de título de una etiqueta.
- fill (propiedad) - especifica los atributos del color de relleno.
Con el siguiente ejemplo se muestra cómo añadir una etiqueta al gráfico. El ejemplo utiliza un archivo del diseñador (exp_piechart.xls) que contiene un gráfico. Usamos este archivo para insertar una etiqueta en el gráfico. A continuación se muestra el código original para añadir una etiqueta al gráfico. La siguiente salida se genera al ejecutar el código.
<!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>
Añadiendo un Control de Cuadro de Texto al Gráfico
Una forma de resaltar información importante en un informe es mediante el uso de un cuadro de texto. Por ejemplo, introducir texto para resaltar el nombre de la empresa o indicar la región geográfica con mayores ventas. La clase ShapeCollection proporciona un método llamado addTextBoxInChart(number, number, number, number), que se utiliza para añadir un control de cuadro de texto a un gráfico. A continuación se muestra la lista de parámetros utilizados para el método:
- arriba - el desplazamiento vertical del cuadro de texto desde la esquina superior izquierda en unidades de 1/4000 del área del gráfico.
- izquierda - el desplazamiento vertical del cuadro de texto desde la esquina superior izquierda en unidades de 1/4000 del área del gráfico.
- altura - la altura del cuadro de texto, en unidades de 1/4000 del área del gráfico.
- ancho - el ancho del cuadro de texto, en unidades de 1/4000 del área del gráfico.
El método devuelve un objeto TextBox. La clase TextBox representa un cuadro de texto en el gráfico.
El siguiente ejemplo muestra cómo añadir un cuadro de texto a un gráfico. El ejemplo utiliza el archivo del diseñador anterior (exp_piechart.xls) que contiene un gráfico. Usamos este archivo para insertar un cuadro de texto en el gráfico para mostrar el título del gráfico. A continuación se muestra el código original para añadir un cuadro de texto al gráfico.
<!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>
Añadiendo una Imagen al Gráfico
Aspose.Cells te permite insertar imágenes en un gráfico. Por ejemplo, agregar una imagen para resaltar o dar más significado a un gráfico o sus contenidos, o insertar un archivo de imagen de marca.
La clase ShapeCollection proporciona un método llamado addPictureInChart(number, number, Uint8Array, number, number), que se utiliza para añadir un objeto de imagen al gráfico. A continuación se muestra la lista de parámetros utilizados para el método:
- arriba - el desplazamiento vertical de la imagen desde la esquina superior izquierda en unidades de 1/4000 del área del gráfico.
- izquierda - el desplazamiento vertical de la imagen desde la esquina superior izquierda en unidades de 1/4000 del área del gráfico.
- flujo - un objeto de flujo que contiene los datos de la imagen.
- escalaAncho - la escala del ancho de la imagen, un valor porcentual.
- escalaAlto - la escala de la altura de la imagen, un valor porcentual.
El método devuelve un objeto Picture. La clase Picture representa un objeto de imagen en el gráfico.
El siguiente ejemplo muestra cómo agregar una imagen al gráfico. El ejemplo utiliza el archivo de diseñador anterior (exp_piechart.xls) que tiene un gráfico en él. Utilizamos este archivo para insertar una imagen en el gráfico. A continuación se muestra el código original para agregar una imagen al gráfico.
<!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>
Agregar casilla de verificación en el gráfico
Aspose.Cells le permite insertar casillas de verificación en una hoja de gráfico utilizando la enumeración MsoDrawingType. El siguiente ejemplo demuestra cómo agregar una casilla de verificación a una hoja de gráfico.
La siguiente imagen muestra la hoja de gráfico con la casilla de verificación en el archivo de salida.
El archivo de salida generado por el siguiente fragmento de código se adjunta para su referencia.
<!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>