Uso de Sparklines y configuraciones de formato 3D con JavaScript a través de C++
Usando Sparklines
Microsoft Excel 2010 puede analizar la información de más maneras que nunca. Permite a los usuarios realizar un seguimiento y resaltar tendencias importantes de datos con nuevas herramientas de análisis y visualización de datos. Las sparklines son mini gráficos que se pueden colocar dentro de las celdas para que puedas ver los datos y el gráfico en la misma tabla. Cuando se usan sparklines de manera adecuada, el análisis de datos es más rápido y preciso. También proporcionan una vista simple de la información, evitando hojas de cálculo sobrecargadas con una gran cantidad de gráficos ocupados.
Aspose.Cells for JavaScript a través de C++ proporciona una API para manipular sparklines en hojas de cálculo.
Sparklines en Microsoft Excel
Para insertar sparklines en Microsoft Excel 2010:
- Selecciona las celdas donde quieres que aparezcan las sparklines. Para que sean fáciles de ver, selecciona las celdas al lado de los datos.
- Haz clic en Insertar en la cinta y luego elige columna en el grupo de Sparklines.
- Seleccione o ingrese el rango de celdas en la hoja de cálculo que contenga los datos fuente. Los gráficos aparecerán.
Los mini gráficos le ayudan a ver tendencias, por ejemplo, el registro de victorias o derrotas de una liga de softball. Incluso pueden resumir toda la temporada de cada equipo en la liga.
Sparklines usando Aspose.Cells for JavaScript a través de C++
Los desarrolladores pueden crear, eliminar o leer sparklines (en el archivo de plantilla) usando la API proporcionada por Aspose.Cells for JavaScript a través de C++. Las clases que gestionan sparklines están contenidas en el módulo SparklineGroupCollection, por lo que necesitas requerir este módulo antes de usar estas funciones.
Al agregar gráficos personalizados para un determinado rango de datos, los desarrolladores tienen la libertad de agregar diferentes tipos de gráficos pequeños a áreas de celdas seleccionadas.
El siguiente ejemplo demuestra la función de Sparklines. El ejemplo muestra cómo:
- Abrir un archivo de plantilla simple.
- Leer la información de sparklines para una hoja de cálculo.
- Agregar nuevas miniaturas para un rango de datos dado a un área de celdas.
- Guarde el archivo de Excel en disco.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Sparkline Example</title>
</head>
<body>
<h1>Aspose.Cells Sparkline 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, CellArea, SparklineType, Color } = 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();
// Instantiate a Workbook by opening the uploaded file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Get the first worksheet
const sheet = workbook.worksheets.get(0);
// Read the Sparklines from the worksheet (if any)
const sparklinesCount = sheet.sparklineGroups.count;
let logHtml = '';
for (let i = 0; i < sparklinesCount; i++) {
const group = sheet.sparklineGroups.get(i);
logHtml += `sparkline group: type:${group.type}, sparkline items count:${group.sparklines.count}<br/>`;
const sparklineCount = group.sparklines.count;
for (let j = 0; j < sparklineCount; j++) {
const sparkline = group.sparklines.get(j);
logHtml += `sparkline: row:${sparkline.row}, col:${sparkline.column}, dataRange:${sparkline.dataRange}<br/>`;
}
}
// Add Sparklines
// Define the CellArea D2:D10 (rows and columns are zero-based: D is column 4 -> index 4)
const ca = CellArea.createCellArea(1, 4, 7, 4);
// Add new Sparklines for a data range to a cell area
const idx = sheet.sparklineGroups.add(SparklineType.Column, "Sheet1!B2:D8", false, ca);
const newGroup = sheet.sparklineGroups.get(idx);
// Create CellsColor and set color
const clr = workbook.createCellsColor();
clr.color = Color.Orange;
newGroup.seriesColor = clr;
// Save the modified Excel file and provide download link
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'Book1.out.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Result Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Operation completed successfully! Click the download link to get the modified file.</p><div>' + logHtml + '</div>';
});
</script>
</html>
Configuración de formato 3D
Podrías necesitar estilos de gráficos 3D para obtener solo los resultados para tu escenario. Aspose.Cells for JavaScript a través de C++ proporciona la API relevante para aplicar el formato 3D de Microsoft Excel 2007.
A continuación se muestra un ejemplo completo para demostrar cómo crear un gráfico y aplicar el formato 3D de Microsoft Excel 2007. Después de ejecutar el código de ejemplo, se agregará un gráfico de columnas (con efectos 3D) a la hoja de cálculo.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>3D Chart Formatting 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, ChartType, Color, BevelPresetType, PresetMaterialType, LightRigType } = 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
const book = new Workbook();
// Add a Data Worksheet
const dataSheet = book.worksheets.add("DataSheet");
// Add Chart Worksheet
const sheet = book.worksheets.add("MyChart");
// Put some values into the cells in the data worksheet
dataSheet.cells.get("B1").value = 1;
dataSheet.cells.get("B2").value = 2;
dataSheet.cells.get("B3").value = 3;
dataSheet.cells.get("A1").value = "A";
dataSheet.cells.get("A2").value = "B";
dataSheet.cells.get("A3").value = "C";
// Define the Chart Collection
const charts = sheet.charts;
// Add a Column chart to the Chart Worksheet
const chartSheetIdx = charts.add(ChartType.Column, 5, 0, 25, 15);
// Get the newly added Chart
const chart = book.worksheets.get(2).charts.get(0);
// Set the background/foreground color for PlotArea/ChartArea
chart.plotArea.area.backgroundColor = Color.White;
chart.chartArea.area.backgroundColor = Color.White;
chart.plotArea.area.foregroundColor = Color.White;
chart.chartArea.area.foregroundColor = Color.White;
// Hide the Legend
chart.showLegend = false;
// Add Data Series for the Chart
chart.nSeries.add("DataSheet!B1:B3", true);
// Specify the Category Data
chart.nSeries.categoryData = "DataSheet!A1:A3";
// Get the Data Series
const ser = chart.nSeries.get(0);
// Apply the 3-D formatting
const spPr = ser.shapeProperties;
const fmt3d = spPr.format3D;
// Specify Bevel with its height/width
const bevel = fmt3d.topBevel;
bevel.type = BevelPresetType.Circle;
bevel.height = 2;
bevel.width = 5;
// Specify Surface material type
fmt3d.surfaceMaterialType = PresetMaterialType.WarmMatte;
// Specify surface lighting type
fmt3d.surfaceLightingType = LightRigType.ThreePoint;
// Specify lighting angle
fmt3d.lightingAngle = 20;
// Specify Series background/foreground and line color
ser.area.backgroundColor = Color.Maroon;
ser.area.foregroundColor = Color.Maroon;
ser.border.color = Color.Maroon;
// Saving the modified Excel file and providing download link
const outputData = book.save(SaveFormat.Xlsx);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = '3d_format.out.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created successfully! Click the download link to get the file.</p>';
});
</script>
</html>