Configuración de la apariencia del gráfico con JavaScript vía C++
Contents
[
Hide
]
Configurar la apariencia del gráfico
En Cómo crear un gráfico dimos una breve introducción a los tipos de gráficos y objetos de gráficos ofrecidos por Aspose.Cells, y describimos cómo crear uno. Este artículo discute cómo personalizar la apariencia de los gráficos configurando sus propiedades:
- Configurando el área del gráfico.
- Configurando las líneas del gráfico.
- Aplicando temas.
- Configurando títulos para gráficos y ejes.
- Trabajando con líneas de cuadrícula.
Configurando el área del gráfico
Hay diferentes tipos de áreas en un gráfico y Aspose.Cells proporciona la flexibilidad para modificar la apariencia de cada área. Los desarrolladores pueden aplicar diferentes configuraciones de formato en un área cambiando su color de primer plano, color de fondo y formato de relleno, etc.
En el ejemplo dado a continuación, hemos aplicado diferentes configuraciones de formato en diferentes tipos de áreas de un gráfico. Estas áreas incluyen:
- Área de trazado
- Área del gráfico
- Área de la colección de series
- Área de un solo punto en una colección de series
El siguiente fragmento de código demuestra cómo configurar el área del 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');
// Create or load workbook
let workbook;
if (fileInput.files.length) {
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
workbook = new Workbook(new Uint8Array(arrayBuffer));
} else {
workbook = new Workbook();
}
// Adding a new worksheet to the Workbook 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 = 150;
worksheet.cells.get("B1").value = 60;
worksheet.cells.get("B2").value = 32;
worksheet.cells.get("B3").value = 50;
// 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 "B3"
chart.nSeries.add("A1:B3", true);
// Setting the foreground color of the plot area
chart.plotArea.area.foregroundColor = new AsposeCells.Color(0, 0, 255);
// Setting the foreground color of the chart area
chart.chartArea.area.foregroundColor = new AsposeCells.Color(255, 255, 0);
// Setting the foreground color of the 1st SeriesCollection area
chart.nSeries.get(0).area.foregroundColor = new AsposeCells.Color(255, 0, 0);
// Setting the foreground color of the area of the 1st SeriesCollection point
chart.nSeries.get(0).points.get(0).area.foregroundColor = new AsposeCells.Color(0, 255, 255);
// Filling the area of the 2nd SeriesCollection with a gradient
chart.nSeries.get(1).area.fillFormat.oneColorGradient = [new AsposeCells.Color(0, 255, 0), 1, AsposeCells.GradientStyleType.Horizontal, 1];
// 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 = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created and ready for download.</p>';
});
</script>
</html>
Configurando las líneas del gráfico
Los desarrolladores también pueden aplicar diferentes estilos en las líneas o marcadores de datos de la SeriesCollection. El siguiente fragmento de código demuestra cómo configurar las líneas del gráfico usando la API de Aspose.Cells.
<!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, Worksheet, Cell } = 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 () => {
// Instantiating a Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook 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(50);
worksheet.cells.get("A2").putValue(100);
worksheet.cells.get("A3").putValue(150);
worksheet.cells.get("B1").putValue(60);
worksheet.cells.get("B2").putValue(32);
worksheet.cells.get("B3").putValue(50);
// 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 "B3"
chart.nSeries.add("A1:B3", true);
// Setting the foreground color of the plot area
chart.plotArea.area.foregroundColor = AsposeCells.Color.Blue;
// Setting the foreground color of the chart area
chart.chartArea.area.foregroundColor = AsposeCells.Color.Yellow;
// Setting the foreground color of the 1st SeriesCollection area
chart.nSeries.get(0).area.foregroundColor = AsposeCells.Color.Red;
// Setting the foreground color of the area of the 1st SeriesCollection point
chart.nSeries.get(0).points.get(0).area.foregroundColor = AsposeCells.Color.Cyan;
// Filling the area of the 2nd SeriesCollection with a gradient
chart.nSeries.get(1).area.fillFormat.oneColorGradient = [AsposeCells.Color.Lime, 1, AsposeCells.GradientStyleType.Horizontal, 1];
// Applying a dotted line style on the lines of a SeriesCollection
chart.nSeries.get(0).border.style = AsposeCells.LineType.Dot;
// Applying a triangular marker style on the data markers of a SeriesCollection
chart.nSeries.get(0).marker.markerStyle = AsposeCells.ChartMarkerType.Triangle;
// Setting the weight of all lines in a SeriesCollection to medium
chart.nSeries.get(1).border.weight = AsposeCells.WeightType.MediumLine;
// 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 = 'book1.out.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>
Aplicando temas de Microsoft Excel 2007/2010 a gráficos
Los desarrolladores pueden aplicar diferentes temas/colores de Microsoft Excel a SeriesCollection u otros objetos del gráfico como se muestra en el ejemplo abajo.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Update Chart Series Fill 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, FillType, ThemeColor, ThemeColorType } = 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();
// Loads the workbook containing the chart
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Get the first worksheet
const worksheet = workbook.worksheets.get(0);
// Get the first chart in the sheet
const chart = worksheet.charts.get(0);
// Specify the FillFormat's type to Solid Fill of the first series
const series = chart.nSeries.get(0);
series.area.fillFormat.fillType = FillType.Solid;
// Get the CellsColor of SolidFill
const cc = series.area.fillFormat.solidFill.cellsColor;
// Create a theme in Accent style
cc.themeColor = new ThemeColor(ThemeColorType.Accent6, 0.6);
// Apply the theme to the series
series.area.fillFormat.solidFill.cellsColor = cc;
// Save the Excel file
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.out.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Chart series fill updated successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
Configuración de los Títulos de Gráficos o Ejes
Puedes usar Microsoft Excel para establecer los títulos de un gráfico y sus ejes en un entorno WYSIWYG. Aspose.Cells también permite a los desarrolladores establecer los títulos del gráfico y sus ejes en tiempo de ejecución. Todos los gráficos y sus ejes contienen una propiedad Title que puede usarse para establecer sus títulos, como se muestra en el ejemplo abajo.
El siguiente fragmento de código demuestra cómo establecer títulos a gráficos y ejes.
<!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, ChartType, GradientStyleType, 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 () => {
// Creating a new Workbook object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook 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(50);
worksheet.cells.get("A2").putValue(100);
worksheet.cells.get("A3").putValue(150);
worksheet.cells.get("B1").putValue(60);
worksheet.cells.get("B2").putValue(32);
worksheet.cells.get("B3").putValue(50);
// 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 "B3"
chart.nSeries.add("A1:B3", true);
// Setting the foreground color of the plot area
chart.plotArea.area.foregroundColor = Color.Blue;
// Setting the foreground color of the chart area
chart.chartArea.area.foregroundColor = Color.Yellow;
// Setting the foreground color of the 1st SeriesCollection area
chart.nSeries.get(0).area.foregroundColor = Color.Red;
// Setting the foreground color of the area of the 1st SeriesCollection point
chart.nSeries.get(0).points.get(0).area.foregroundColor = Color.Cyan;
// Filling the area of the 2nd SeriesCollection with a gradient
chart.nSeries.get(1).area.fillFormat.oneColorGradient = [Color.Lime, 1, GradientStyleType.Horizontal, 1];
// Setting the title of a chart
chart.title.text = "Title";
// Setting the font color of the chart title to blue
chart.title.font.color = Color.Blue;
// Setting the title of category axis of the chart
chart.categoryAxis.title.text = "Category";
// Setting the title of value axis of the chart
chart.valueAxis.title.text = "Value";
// 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 = 'book1.out.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>
Trabajar con líneas de cuadrícula principales
Es posible personalizar el aspecto de las líneas de cuadrícula principales. Ocultar o mostrar las líneas de cuadrícula, o definir su color y otras configuraciones. A continuación, mostramos cómo ocultar las líneas de cuadrícula y cómo cambiar su color.
Ocultar líneas de cuadrícula principales
Los desarrolladores pueden controlar la visibilidad de las líneas de cuadrícula principales configurando la propiedad isVisible() del objeto Line a true o false.
El siguiente fragmento de código demuestra cómo ocultar las líneas de cuadrícula principales. Después de ocultar las líneas de cuadrícula principales, se añadirá un gráfico de columnas a la hoja de cálculo sin líneas de cuadrícula.
<!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 () => {
// Instantiate a new Workbook
const workbook = new Workbook();
// Adding a new worksheet to the Workbook 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(50);
worksheet.cells.get("A2").putValue(100);
worksheet.cells.get("A3").putValue(150);
worksheet.cells.get("B1").putValue(60);
worksheet.cells.get("B2").putValue(32);
worksheet.cells.get("B3").putValue(50);
// 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 "B3"
chart.nSeries.add("A1:B3", true);
// Setting the foreground color of the plot area
chart.plotArea.area.foregroundColor = AsposeCells.Color.Blue;
// Setting the foreground color of the chart area
chart.chartArea.area.foregroundColor = AsposeCells.Color.Yellow;
// Setting the foreground color of the 1st SeriesCollection area
chart.nSeries.get(0).area.foregroundColor = AsposeCells.Color.Red;
// Setting the foreground color of the area of the 1st SeriesCollection point
chart.nSeries.get(0).points.get(0).area.foregroundColor = AsposeCells.Color.Cyan;
// Filling the area of the 2nd SeriesCollection with a gradient
chart.nSeries.get(1).area.fillFormat.oneColorGradient = [AsposeCells.Color.Lime, 1, AsposeCells.GradientStyleType.Horizontal, 1];
// Hiding the major gridlines of Category Axis
chart.categoryAxis.majorGridLines.isVisible = false;
// Hiding the major gridlines of Value Axis
chart.valueAxis.majorGridLines.isVisible = false;
// Saving the Excel file and preparing 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 = 'book1.out.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 modified file.</p>';
});
</script>
</html>
Cambiando la configuración de las líneas de cuadrícula principales
Los desarrolladores no solo pueden controlar la visibilidad de las líneas de cuadrícula principales, sino también otras propiedades, incluido su color, etc.
El siguiente fragmento de código demuestra cómo cambiar el color de las líneas de cuadrícula principales. Después de establecer el color de las líneas de cuadrícula principales, se añadirá un gráfico de columnas a la hoja con líneas de cuadrícula modificadas.
<!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, Worksheet, Cell } = 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 object
const workbook = new Workbook();
// Adding a new worksheet to the Workbook 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 = 150;
worksheet.cells.get("B1").value = 60;
worksheet.cells.get("B2").value = 32;
worksheet.cells.get("B3").value = 50;
// 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 "B3"
chart.nSeries.add("A1:B3", true);
// Setting the foreground color of the plot area
chart.plotArea.area.foregroundColor = AsposeCells.Color.Blue;
// Setting the foreground color of the chart area
chart.chartArea.area.foregroundColor = AsposeCells.Color.Yellow;
// Setting the foreground color of the 1st SeriesCollection area
chart.nSeries.get(0).area.foregroundColor = AsposeCells.Color.Red;
// Setting the foreground color of the area of the 1st SeriesCollection point
chart.nSeries.get(0).points.get(0).area.foregroundColor = AsposeCells.Color.Cyan;
// Filling the area of the 2nd SeriesCollection with a gradient
chart.nSeries.get(1).area.fillFormat.oneColorGradient = [AsposeCells.Color.Lime, 1, AsposeCells.GradientStyleType.Horizontal, 1];
// Setting the color of Category Axis' major gridlines to silver
chart.categoryAxis.majorGridLines.color = AsposeCells.Color.Silver;
// Setting the color of Value Axis' major gridlines to red
chart.valueAxis.majorGridLines.color = AsposeCells.Color.Red;
// Saving the Excel file and creating 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 = 'book1.out.xls';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created and ready for download.</p>';
});
});
</script>
</html>