Establecer la fuente de datos para el gráfico con JavaScript vía C++
Contents
[
Hide
]
En nuestros temas anteriores, ya hemos proporcionado muchos ejemplos para demostrar cómo puedes configurar una fuente de datos para tu gráfico, pero en este tema, proporcionaremos más detalles sobre los tipos de datos que se pueden establecer para un gráfico.
Establecer Datos del Gráfico
Hay dos tipos de datos con los que trabajar al utilizar gráficos con Aspose.Cells como se muestra a continuación:
- Datos del gráfico.
- Datos de categoría.
Datos del Gráfico
Los datos del gráfico son los datos que usamos como fuente para construir nuestros gráficos. Podemos añadir un rango de celdas (que contienen datos del gráfico) llamando al método add(string, boolean) del objeto SeriesCollection.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Add Worksheet and 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 () => {
// Instantiate a new Workbook
const workbook = new Workbook();
// Adding a new worksheet to the Excel object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
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 = 170;
worksheet.cells.get("A4").value = 300;
worksheet.cells.get("B1").value = 160;
worksheet.cells.get("B2").value = 32;
worksheet.cells.get("B3").value = 50;
worksheet.cells.get("B4").value = 40;
// Adding sample values to cells as category data
worksheet.cells.get("C1").value = "Q1";
worksheet.cells.get("C2").value = "Q2";
worksheet.cells.get("C3").value = "Y1";
worksheet.cells.get("C4").value = "Y2";
// Adding a chart to the worksheet
const chartIndex = worksheet.charts.add(AsposeCells.ChartType.Column, 5, 0, 15, 5);
// Accessing the instance of the newly added chart
const chart = worksheet.charts.get(chartIndex);
// Adding SeriesCollection (chart data source) to the chart ranging from "A1" cell to "B4"
chart.nSeries.add("A1:B4", true);
// Saving 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 = 'output.xls';
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>
Datos de Categoría
Los datos de categoría se utilizan para etiquetar los datos del gráfico y se pueden agregar a SeriesCollection usando su propiedad categoryData. A continuación se presenta un ejemplo completo para demostrar el uso de datos de gráfico y categoría. Después de ejecutar el código de ejemplo anterior, se añadirá un gráfico de columnas a la hoja de cálculo como se muestra abajo.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells - Create Workbook with 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, ChartType } = 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');
// Instantiate or load workbook
let workbook;
if (fileInput.files.length) {
const arrayBuffer = await fileInput.files[0].arrayBuffer();
workbook = new Workbook(new Uint8Array(arrayBuffer));
} else {
workbook = new Workbook();
}
// Adding a new worksheet to the Excel object
const sheetIndex = workbook.worksheets.add();
// Obtaining the reference of the newly added worksheet by passing its sheet index
const worksheet = workbook.worksheets.get(sheetIndex);
// Adding sample values to cells
worksheet.cells.get("A1").putValue(10);
worksheet.cells.get("A2").putValue(100);
worksheet.cells.get("A3").putValue(170);
worksheet.cells.get("A4").putValue(200);
worksheet.cells.get("B1").putValue(120);
worksheet.cells.get("B2").putValue(320);
worksheet.cells.get("B3").putValue(50);
worksheet.cells.get("B4").putValue(40);
// Adding sample values to cells as category data
worksheet.cells.get("C1").putValue("Q1");
worksheet.cells.get("C2").putValue("Q2");
worksheet.cells.get("C3").putValue("Y1");
worksheet.cells.get("C4").putValue("Y2");
// 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 SeriesCollection (chart data source) to the chart ranging from "A1" cell to "B4"
chart.nSeries.add("A1:B4", true);
// Setting the data source for the category data of SeriesCollection
chart.nSeries.categoryData = "C1:C4";
// Saving the Excel file and creating 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 = 'output.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created. Click the download link to save the file.</p>';
});
</script>
</html>