Personalizar ejes de gráficos en presentaciones usando JavaScript
Visión general
Este artículo explica cómo personalizar los ejes de los gráficos con Aspose.Slides para Node.js a través de Java. Cubre valores de eje calculados, intercambio de filas y columnas del gráfico, visibilidad del eje, intervalos de etiquetas de categorías y marcas de graduación, categorías de fechas y formato, rotación del título, posicionamiento del eje, unidades de visualización y escala logarítmica.
Obtener los valores máximos en el eje vertical de los gráficos
Cree una Presentation y añada un gráfico de áreas con datos predeterminados. Llame a validateChartLayout antes de leer los valores de eje calculados para que el diseño del gráfico esté actualizado.
Lea getActualMaxValue y getActualMinValue para los límites del eje, y getActualMajorUnit y getActualMinorUnit para los intervalos de marcas. getActualMajorUnitScale y getActualMinorUnitScale proporcionan escalas de unidades de tiempo, relevantes para ejes de fechas. El ejemplo almacena estos valores en variables locales y guarda el gráfico.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation();
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().addChart(aspose.slides.ChartType.Area, 100, 100, 500, 350);
chart.validateChartLayout();
var maxValue = chart.getAxes().getVerticalAxis().getActualMaxValue();
var minValue = chart.getAxes().getVerticalAxis().getActualMinValue();
var majorUnit = chart.getAxes().getVerticalAxis().getActualMajorUnit();
var minorUnit = chart.getAxes().getVerticalAxis().getActualMinorUnit();
var majorUnitScale = chart.getAxes().getVerticalAxis().getActualMajorUnitScale();
var minorUnitScale = chart.getAxes().getVerticalAxis().getActualMinorUnitScale();
presentation.save("AxisValues_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Intercambiar los datos entre ejes
Utilice switchRowColumn para intercambiar los roles de series y categorías en los datos del gráfico. Cada categoría anterior se convierte en una serie, y cada serie anterior se convierte en una categoría. Esto cambia cómo se agrupan los datos; no intercambia los ejes horizontal y vertical. El ejemplo usa setRange para enlazar los datos predeterminados a Sheet1!A1:D5, incluyendo la fila de encabezado y la columna de categoría, antes de intercambiar filas y columnas. Guarda un gráfico con cuatro series y tres categorías.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation();
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 100, 100, 400, 300);
chart.getChartData().setRange("Sheet1!A1:D5");
chart.getChartData().switchRowColumn();
presentation.save("SwitchChartRowColumns_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Invertir el orden de trazado de un eje
Utilice setPlotOrderReversed para invertir un eje de categoría o de valor. Por ejemplo, un gráfico de barras horizontal puede mostrar las etapas del proyecto de arriba a abajo en el mismo orden que la hoja de cálculo: Planning, Development, Testing. Invertir un eje cambia la dirección del trazado; no ordena ni reorganiza los datos del libro de trabajo. En comparación, switchRowColumn intercambia los roles de series y categorías.
El siguiente ejemplo crea un gráfico de barras horizontal con tres etapas y una serie. Guarda una presentación con tres diapositivas: orden normal, categorías invertidas y valores invertidos. Cada copia usa el mismo conjunto de datos, y solo un eje se invierte en cada copia.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation();
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredBar, 50, 40, 620, 320);
chart.setLegend(false);
chart.getChartData().getCategories().clear();
chart.getChartData().getSeries().clear();
var workbook = chart.getChartData().getChartDataWorkbook();
workbook.clear(0);
var series = chart.getChartData().getSeries().add(aspose.slides.ChartType.ClusteredBar);
var stages = ["Planning", "Development", "Testing"];
var values = [10, 30, 20];
for (var i = 0; i < stages.length; i++) {
var categoryCell = workbook.getCell(0, i + 1, 0, stages[i]);
chart.getChartData().getCategories().add(categoryCell);
var valueCell = workbook.getCell(0, i + 1, 1, values[i]);
series.getDataPoints().addDataPointForBarSeries(valueCell);
}
// Diapositiva 2: mostrar la primera categoría en la parte superior.
var categorySlide = presentation.getSlides().addClone(slide);
var categoryChart = categorySlide.getShapes().get_Item(0);
categoryChart.getAxes().getVerticalAxis().setPlotOrderReversed(true);
// Mantener el eje de valores horizontal en la parte inferior.
categoryChart.getAxes().getVerticalAxis().setCrossType(aspose.slides.CrossesType.Maximum);
// Diapositiva 3: invertir solo la escala numérica horizontal.
var valueSlide = presentation.getSlides().addClone(slide);
var valueChart = valueSlide.getShapes().get_Item(0);
valueChart.getAxes().getHorizontalAxis().setPlotOrderReversed(true);
presentation.save("ReversedAxes.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Invertir un eje también puede mover el eje perpendicular al lado opuesto del trazado. setCrossType controla dónde cruza el otro eje con el eje que se está configurando. En la diapositiva 2, llamarlo con aspose.slides.CrossesType.Maximum en el eje de categoría invertido mantiene el eje de valores horizontal en la parte inferior. Para un punto de cruce específico, use setCrossAt. Verifique la configuración de cruce al cambiar la dirección, especialmente si el gráfico ya tiene un punto de cruce personalizado. Llame a setPlotOrderReversed con false para restaurar la dirección de trazado normal; la configuración de cruce es independiente.
| Orden normal (diapositiva 1) | Categorías invertidas (diapositiva 2) | Valores invertidos (diapositiva 3) |
|---|---|---|
![]() |
![]() |
![]() |
| Las categorías van de abajo a arriba; los valores aumentan de izquierda a derecha. | Planificación, Desarrollo y Pruebas van de arriba a abajo. Los valores y el orden de filas del libro de trabajo permanecen sin cambios. | Las categorías conservan su orden normal; los valores aumentan de derecha a izquierda. El eje de categorías cruza en cero a la derecha. |
Desactivar el eje vertical para gráficos de líneas
Llame a setVisible con false en el eje vertical para ocultarlo. El ejemplo crea un gráfico de líneas con datos predeterminados y lo guarda con el eje vertical oculto.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation();
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 100, 100, 400, 300);
chart.getAxes().getVerticalAxis().setVisible(false);
presentation.save("HiddenVerticalAxis.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Desactivar el eje horizontal para gráficos de líneas
Llame a setVisible con false en el eje horizontal para ocultarlo. El ejemplo crea un gráfico de líneas con datos predeterminados y lo guarda con el eje horizontal oculto.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation();
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 100, 100, 400, 300);
chart.getAxes().getHorizontalAxis().setVisible(false);
presentation.save("HiddenHorizontalAxis.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Cambiar un eje de categoría
Use setCategoryAxisType para elegir un eje de categoría de fecha o de texto. Este ejemplo requiere ExistingChart.pptx, con un gráfico como la primera forma en la primera diapositiva y celdas de categoría que contienen valores de fecha numéricos de Excel. Cambia el eje horizontal a un eje de fecha. Llamar a setAutomaticMajorUnit con false, setMajorUnit con 1 y setMajorUnitScale con TimeUnitType.Months coloca marcas mayores a intervalos de un mes.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation("ExistingChart.pptx");
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().get_Item(0);
chart.getAxes().getHorizontalAxis().setCategoryAxisType(aspose.slides.CategoryAxisType.Date);
chart.getAxes().getHorizontalAxis().setAutomaticMajorUnit(false);
chart.getAxes().getHorizontalAxis().setMajorUnit(1);
chart.getAxes().getHorizontalAxis().setMajorUnitScale(aspose.slides.TimeUnitType.Months);
presentation.save("ChangeChartCategoryAxis_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Controlar los intervalos de etiquetas del eje de categoría
Cuando un gráfico tiene muchas categorías, reduzca el número de etiquetas de eje visibles sin eliminar categorías ni puntos de datos. Llame a setAutomaticTickLabelSpacing con false, y después pase el intervalo de categoría deseado a setTickLabelSpacing. Para categorías de texto en su orden normal, el recuento comienza en la primera categoría:
| Intervalo | Etiquetas mostradas en el ejemplo |
|---|---|
1 |
Categoría 1, Categoría 2, Categoría 3, … Categoría 24 |
2 |
Categoría 1, Categoría 3, Categoría 5, … Categoría 23 |
3 |
Categoría 1, Categoría 4, Categoría 7, … Categoría 22 |
Un intervalo de 3 muestra cada tercera etiqueta, dejando dos etiquetas ocultas entre las mostradas. No elimina las columnas correspondientes. El espaciado automático elige un intervalo en función del espacio disponible; no muestra necesariamente todas las etiquetas.
Las marcas de graduación tienen controles independientes. Llame a setAutomaticTickMarksSpacing con false y use setTickMarksSpacing para fijar su intervalo. Por ejemplo, 1 mantiene una marca de graduación en cada intervalo de categoría mientras las etiquetas aparecen solo cada tercera categoría. Use setMajorTickMark con un estilo visible para que pueda ver el resultado. Volver a establecer cualquiera de los métodos de espaciado automático con true permite que el gráfico elija nuevamente ese intervalo.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation();
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 30, 40, 660, 320);
chart.setLegend(false);
chart.getChartData().getCategories().clear();
chart.getChartData().getSeries().clear();
var workbook = chart.getChartData().getChartDataWorkbook();
workbook.clear(0);
var series = chart.getChartData().getSeries().add(aspose.slides.ChartType.ClusteredColumn);
for (var i = 0; i < 24; i++) {
var categoryCell = workbook.getCell(0, i + 1, 0, "Category " + (i + 1));
chart.getChartData().getCategories().add(categoryCell);
var valueCell = workbook.getCell(0, i + 1, 1, 10 + i % 6 * 5);
series.getDataPoints().addDataPointForBarSeries(valueCell);
}
var axis = chart.getAxes().getHorizontalAxis();
axis.setCategoryAxisType(aspose.slides.CategoryAxisType.Text);
axis.getTextFormat().getTextBlockFormat().setRotationAngle(0);
axis.getTextFormat().getPortionFormat().setFontHeight(12);
axis.setMajorTickMark(aspose.slides.TickMarkType.Outside);
axis.setAutomaticTickLabelSpacing(true);
axis.setAutomaticTickMarksSpacing(true);
// Diapositiva 2: mostrar cada tercera etiqueta, pero mantener una marca de graduación para cada categoría.
var manualSlide = presentation.getSlides().addClone(slide);
var manualChart = manualSlide.getShapes().get_Item(0);
var manualAxis = manualChart.getAxes().getHorizontalAxis();
manualAxis.setAutomaticTickLabelSpacing(false);
manualAxis.setTickLabelSpacing(3);
manualAxis.setAutomaticTickMarksSpacing(false);
manualAxis.setTickMarksSpacing(1);
// Diapositiva 3: permitir que el gráfico elija ambos intervalos nuevamente.
var restoredSlide = presentation.getSlides().addClone(manualSlide);
var restoredChart = restoredSlide.getShapes().get_Item(0);
restoredChart.getAxes().getHorizontalAxis().setAutomaticTickLabelSpacing(true);
restoredChart.getAxes().getHorizontalAxis().setAutomaticTickMarksSpacing(true);
presentation.save("CategoryAxisIntervals.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Espaciado automático (diapositiva 1): En esta representación, se muestra cada segunda etiqueta de categoría y se envuelve en dos líneas. El resultado automático puede variar según el tamaño del gráfico, las fuentes y el renderizador.

Espaciado manual (diapositiva 2): Cada tercera etiqueta se muestra en una línea, mientras las marcas de graduación permanecen en cada intervalo de categoría. Las 24 columnas, incluidas las que no tienen etiquetas, siguen visibles con los mismos valores. La diapositiva 3 restaura la apariencia automática mostrada arriba.

Elegir el eje y el intervalo correctos
Utilice este intervalo de recuento de categorías para un eje de categoría de texto, como el eje de categoría de un gráfico de columnas, líneas, áreas o barras. En un gráfico de columnas, es el eje horizontal. En un gráfico de barras horizontal, el eje de categoría es vertical, por lo que aplique estos ajustes al eje devuelto por getVerticalAxis. El espaciado de marcas de graduación también se aplica a un eje de series en los gráficos que lo tengan.
No utilice el espaciado de etiquetas de categoría para establecer la escala numérica de un eje de valor. En un eje de valor, setMajorUnit especifica una diferencia en valores: por ejemplo, una unidad mayor de 10 produce marcas en 0, 10, 20, etc., cuando el eje comienza en cero. Un intervalo de etiqueta de categoría de 3 cuenta posiciones de categoría, independientemente de sus valores de datos. Los gráficos de dispersión y burbuja usan ejes de valor en lugar de un eje de categoría de texto. Para un eje de fecha, use unidades mayores basadas en tiempo y escalas como se describe en Cambiar un eje de categoría.
Establecer el formato de fecha para los valores del eje de categoría
El ejemplo sustituye los datos predeterminados del gráfico por cuatro valores anuales. Las fechas se almacenan como números de serie de OLE Automation en la primera hoja de cálculo (índice 0), calculados como el número de días transcurridos desde el 30 de diciembre de 1899 para esas fechas. El cálculo JavaScript usa marcas de tiempo UTC y divide la diferencia por 86 400 000 milisegundos por día. Use setCategoryAxisType con CategoryAxisType.Date, llame a setNumberFormatLinkedToSource con false y pase yyyy a setNumberFormat para que las etiquetas de categoría muestren años de cuatro dígitos independientemente del formato de la celda.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation();
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 50, 50, 450, 300);
chart.getChartData().getCategories().clear();
chart.getChartData().getSeries().clear();
var workbook = chart.getChartData().getChartDataWorkbook();
workbook.clear(0);
var baseDate = Date.UTC(1899, 11, 30);
var series = chart.getChartData().getSeries().add(aspose.slides.ChartType.Line);
for (var i = 0; i < 4; i++) {
var date = Date.UTC(2015 + i, 0, 1);
var categoryCell = workbook.getCell(0, i + 1, 0, (date - baseDate) / 86400000);
chart.getChartData().getCategories().add(categoryCell);
var valueCell = workbook.getCell(0, i + 1, 1, i + 1);
series.getDataPoints().addDataPointForLineSeries(valueCell);
}
chart.getAxes().getHorizontalAxis().setCategoryAxisType(aspose.slides.CategoryAxisType.Date);
chart.getAxes().getHorizontalAxis().setNumberFormatLinkedToSource(false);
chart.getAxes().getHorizontalAxis().setNumberFormat("yyyy");
presentation.save("DateAxisFormat.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Establecer un ángulo de rotación para el título del eje del gráfico
Llame a setTitle con true en el eje vertical, proporcione el texto del título y use setRotationAngle para rotar el título. El ángulo se mide en grados; este ejemplo guarda un gráfico de columnas con su título del eje de valores rotado 90 grados.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation();
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
chart.getAxes().getVerticalAxis().setTitle(true);
chart.getAxes().getVerticalAxis().getTitle().addTextFrameForOverriding("Value");
chart.getAxes().getVerticalAxis().getTitle().getTextFormat().getTextBlockFormat().setRotationAngle(90);
presentation.save("RotatedAxisTitle.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Establecer la posición del eje en un eje de categoría o de valor
Utilice setAxisBetweenCategories para controlar si el eje de valores cruza el eje de categoría entre categorías o en las marcas de categoría. Este ajuste se aplica a los ejes de categoría. El ejemplo lo establece en true en el eje de categoría horizontal de un gráfico de columnas y guarda el resultado.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation();
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
chart.getAxes().getHorizontalAxis().setAxisBetweenCategories(true);
presentation.save("AxisBetweenCategories.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Establecer la unidad de visualización en el eje de valor de un gráfico
Utilice setDisplayUnit para escalar las etiquetas de un eje de valor sin modificar los datos subyacentes. Con DisplayUnitType establecido en Millions, un valor de 60 000 000 se muestra como 60. El ejemplo crea un gráfico de columnas y aplica la unidad de millones a su eje vertical.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation();
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 50, 50, 450, 300);
chart.getAxes().getVerticalAxis().setDisplayUnit(aspose.slides.DisplayUnitType.Millions);
presentation.save("Result.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Configurar un eje de valor logarítmico
Un eje de valor logarítmico es útil cuando los valores positivos abarcan varios órdenes de magnitud. Por ejemplo, un servicio podría recibir 10, 100, 1 000, 10 000 y 100 000 solicitudes en cinco periodos. En una escala lineal, los valores más pequeños aparecen muy juntos cerca de cero. Una escala logarítmica facilita comparar su crecimiento relativo: distancias iguales representan relaciones de razón iguales y no diferencias iguales.
Llame a setLogarithmic con true en el eje de valor y use setLogBase para elegir la base. Esto cambia cómo se muestran los valores existentes; no modifica los datos ni añade una línea de tendencia logarítmica. Una línea de tendencia representa una relación ajustada a los datos y es una característica independiente.
Elegir el eje de valor y la base
Para un gráfico de líneas o de columnas, el eje de valor lo devuelve getVerticalAxis. Para un gráfico de barras horizontal, lo devuelve getHorizontalAxis. Los gráficos de dispersión y burbuja tienen dos ejes de valor, por lo que elija el eje horizontal para los valores X, el eje vertical para los valores Y, o ambos. No aplique escala logarítmica a un eje de categoría.
La base logarítmica predeterminada es 10. Para gráficos PPTX, use una base entre 2 y 1000, inclusive; también se admiten bases fraccionarias como 2.5. Con la base 10, potencias sucesivas como 10, 100, 1 000 y 10 000 están igualmente espaciadas.
Comparar la escala lineal y la logarítmica
El siguiente ejemplo independiente crea un gráfico de líneas con los cinco recuentos de solicitudes en la primera diapositiva, luego clona esa diapositiva y habilita un eje de valor logarítmico base 10 en la segunda. Ambas diapositivas conservan los mismos datos.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
var presentation = new aspose.slides.Presentation();
try {
var slide = presentation.getSlides().get_Item(0);
var chart = slide.getShapes().addChart(aspose.slides.ChartType.Line, 30, 40, 660, 200);
chart.setLegend(false);
chart.getChartData().getCategories().clear();
chart.getChartData().getSeries().clear();
var workbook = chart.getChartData().getChartDataWorkbook();
workbook.clear(0);
var series = chart.getChartData().getSeries().add(aspose.slides.ChartType.Line);
var values = [10, 100, 1000, 10000, 100000];
for (var i = 0; i < values.length; i++) {
var categoryCell = workbook.getCell(0, i + 1, 0, "Period " + (i + 1));
chart.getChartData().getCategories().add(categoryCell);
var valueCell = workbook.getCell(0, i + 1, 1, values[i]);
series.getDataPoints().addDataPointForLineSeries(valueCell);
}
// Mantener la primera diapositiva lineal y cambiar solo la escala del eje de valores de la copia.
var logarithmicSlide = presentation.getSlides().addClone(slide);
var logarithmicChart = logarithmicSlide.getShapes().get_Item(0);
var valueAxis = logarithmicChart.getAxes().getVerticalAxis();
valueAxis.setLogarithmic(true);
valueAxis.setLogBase(10);
presentation.save("LogarithmicAxis.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Escala lineal (diapositiva 1): Distancias verticales iguales representan diferencias iguales en los recuentos de solicitudes. El valor más grande domina el gráfico, dificultando la distinción de los valores menores.

Escala logarítmica (diapositiva 2): Distancias verticales iguales representan razones iguales. Cada periodo tiene diez veces más solicitudes que el anterior, por lo que los puntos forman una línea recta ascendente en la escala base 10. Las etiquetas del eje siguen mostrando los recuentos originales de solicitudes.

Gestionar valores cero y negativos
Una escala logarítmica solo puede mostrar valores estrictamente positivos. Verifique los datos antes de habilitarla. Si los valores cero o negativos son significativos, mantenga una escala lineal o muéstrelos por separado. Si excluir esos valores es apropiado para el análisis, explique la omisión. No los reemplace silenciosamente por números pequeños positivos, ya que eso cambia el significado de los datos. Cualquier mínimo o máximo configurado manualmente para un eje logarítmico también debe ser positivo.
Preguntas frecuentes
¿Cómo establezco el valor en el que un eje cruza al otro (cruce del eje)?
Utilice setCrossType para seleccionar el comportamiento de cruce. Para especificar un valor numérico de cruce, use setCrossAt. Estas configuraciones le permiten mover el cruce del eje a una línea base adecuada.
¿Cómo puedo posicionar las etiquetas de marcas respecto al eje?
Llame a setTickLabelPosition usando TickLabelPositionType: Low, High, NextTo o None. Para controlar las propias marcas de graduación, use setMajorTickMark o setMinorTickMark; estos son independientes del posicionamiento de las etiquetas.


