Gestionar series de datos de gráficos en presentaciones con JavaScript
Visión general
Un gráfico almacena sus datos trazados en un libro de datos de gráfico. Un ChartSeries representa un conjunto de valores relacionados, y cada ChartDataPoint de la serie hace referencia a una o más celdas del libro de trabajo. Los objetos ChartCategory proporcionan las etiquetas o valores de agrupación compartidos por las series. Por lo tanto, el nombre de la serie, las categorías y los valores de los puntos están conectados a objetos ChartDataCell en lugar de almacenarse solo como texto visible.
En un gráfico de categorías típico, el libro de datos predeterminado usa la fila 0 para los nombres de las series, la columna 0 para los nombres de las categorías y el resto de celdas para los valores de las series. Los índices de hoja, fila y columna que se pasan a ChartDataWorkbook.getCell son base cero. Este diseño es útil cuando crea un gráfico con datos predeterminados, pero no asuma que todos los gráficos existentes lo utilicen. Para una presentación cargada, examine las celdas referenciadas por las series, categorías y puntos de datos antes de cambiar los valores del libro.
Los ajustes del gráfico tienen tres ámbitos diferentes:
- Configuraciones a nivel de serie, como ChartSeries.getFormat, que proporcionan la apariencia predeterminada para todos los puntos de una serie.
- Configuraciones de punto de datos, como ChartDataPoint.getFormat, que sustituyen la apariencia de la serie para un punto.
- Configuraciones de grupo que se aplican a series compatibles que pertenecen al mismo ChartSeriesGroup. Acceda al grupo mediante ChartSeries.getParentSeriesGroup cuando necesite establecer opciones como solapamiento o ancho del espacio.
Cuando no se establece un relleno explícito para el punto o la serie, el estilo y el tema del gráfico determinan la apariencia automática. Cuando están presentes tanto el formato de la serie como el del punto, el formato del punto tiene prioridad para ese punto.
Establecer el solapamiento de la serie del gráfico
El método ChartSeries.getOverlap informa cuánto se superponen las barras o columnas en un gráfico 2D, desde -100 hasta 100 por ciento. Es una proyección de solo lectura del ajuste en el grupo de series padre. Utilice ChartSeriesGroup.setOverlap para actualizar todas las series compatibles en ese grupo. Esta opción se aplica a los tipos de gráfico que muestran barras o columnas agrupadas; no afecta a los grupos de series no relacionados en un gráfico combinado.
El siguiente ejemplo establece el solapamiento para el grupo que contiene la primera serie:
const aspose = {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const overlapPercent = java.newByte(30);
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(firstSlideIndex);
// El nuevo gráfico contiene series, categorías y valores de muestra.
const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);
const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
series.getParentSeriesGroup().setOverlap(overlapPercent);
presentation.save("series_overlap.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
El resultado:
Cambiar el color de relleno de la serie
Utilice ChartSeries.getFormat para establecer el relleno predeterminado de una serie completa. Si un punto ya tiene un relleno explícito, su configuración ChartDataPoint.getFormat sustituye el relleno de la serie para ese punto.
El siguiente ejemplo aplica un relleno sólido azul a la primera serie:
const aspose = {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const solidFillType = java.newByte(aspose.slides.FillType.Solid);
const blueColor = java.getStaticFieldValue("java.awt.Color", "BLUE");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(firstSlideIndex);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);
const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
series.getFormat().getFill().setFillType(solidFillType);
series.getFormat().getFill().getSolidFillColor().setColor(blueColor);
presentation.save("series_color.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
El resultado:
Cambiar el nombre de la serie
El nombre de una serie se almacena en el libro de datos del gráfico y normalmente se muestra en la leyenda. En el libro predeterminado creado para un gráfico de columnas agrupadas, la celda B1 está en la fila 0, columna 1 y contiene el nombre de la primera serie. Las constantes nombradas en el siguiente ejemplo hacen explícita esa estructura:
const aspose = {};
aspose.slides = require("aspose.slides.via.java");
const firstSlideIndex = 0;
const worksheetIndex = 0;
const seriesNameRowIndex = 0;
const firstSeriesColumnIndex = 1;
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(firstSlideIndex);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);
const workbook = chart.getChartData().getChartDataWorkbook();
const seriesNameCell = workbook.getCell(worksheetIndex, seriesNameRowIndex, firstSeriesColumnIndex);
seriesNameCell.setValue("Revenue");
presentation.save("series_name.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
También puede actualizar la celda ya referenciada por ChartSeries.getName. Este enfoque evita suponer una fila y columna específicas en un gráfico existente:
const aspose = {};
aspose.slides = require("aspose.slides.via.java");
const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const firstNameCellIndex = 0;
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(firstSlideIndex);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);
const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
const seriesNameCell = series.getName().getAsCells().get_Item(firstNameCellIndex);
seriesNameCell.setValue("Revenue");
presentation.save("series_name.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
El resultado:
Obtener el color de relleno automático de la serie
ChartSeries.getAutomaticSeriesColor devuelve el color calculado a partir del índice de la serie y el estilo del gráfico. Este es el color utilizado cuando el relleno de la serie no ha sido definido explícitamente. Llamar al método lee el color calculado; no asigna un nuevo relleno.
El siguiente ejemplo muestra en pantalla el color automático de cada serie predeterminada:
const aspose = {};
aspose.slides = require("aspose.slides.via.java");
const firstSlideIndex = 0;
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(firstSlideIndex);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);
const seriesCount = chart.getChartData().getSeries().size();
for (let seriesIndex = 0; seriesIndex < seriesCount; seriesIndex++) {
const series = chart.getChartData().getSeries().get_Item(seriesIndex);
const automaticColor = series.getAutomaticSeriesColor();
const automaticColorText = automaticColor.toString();
console.log("Series " + seriesIndex + ": " + automaticColorText);
}
} finally {
presentation.dispose();
}
Ejemplo de salida para el estilo de gráfico predeterminado:
Series 0: java.awt.Color[r=79,g=129,b=189]
Series 1: java.awt.Color[r=192,g=80,b=77]
Series 2: java.awt.Color[r=155,g=187,b=89]
Los colores exactos dependen del estilo del gráfico y del tema.
Establecer color de relleno invertido para una serie del gráfico
Para series de barras, columnas y burbujas, ChartSeries.setInvertIfNegative puede mostrar valores negativos con un relleno diferente. Establezca el relleno normal de la serie como sólido, habilite la inversión y asigne el color para valores negativos mediante ChartSeries.getInvertedSolidFillColor. Los números negativos permanecen sin cambios en el libro de trabajo; solo cambia su color de visualización.
El siguiente ejemplo reemplaza los datos predeterminados del gráfico con una serie. La fila 0 de la hoja contiene el nombre de la serie, la columna 0 contiene los nombres de las categorías y la columna 1 contiene los valores:
const aspose = {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const firstSlideIndex = 0;
const worksheetIndex = 0;
const headerRowIndex = 0;
const categoryColumnIndex = 0;
const firstSeriesColumnIndex = 1;
const firstDataRowIndex = 1;
const solidFillType = java.newByte(aspose.slides.FillType.Solid);
const redColor = java.getStaticFieldValue("java.awt.Color", "RED");
const categoryNames = ["Category 1", "Category 2", "Category 3"];
const seriesValues = [-20, 50, -30];
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(firstSlideIndex);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);
const chartData = chart.getChartData();
const workbook = chartData.getChartDataWorkbook();
chartData.getSeries().clear();
chartData.getCategories().clear();
const seriesNameCell = workbook.getCell(worksheetIndex, headerRowIndex, firstSeriesColumnIndex, "Series 1");
const chartType = chart.getType();
const series = chartData.getSeries().add(seriesNameCell, chartType);
for (let categoryIndex = 0; categoryIndex < categoryNames.length; categoryIndex++) {
const dataRowIndex = firstDataRowIndex + categoryIndex;
const categoryName = categoryNames[categoryIndex];
const seriesValue = seriesValues[categoryIndex];
const categoryCell = workbook.getCell(worksheetIndex, dataRowIndex, categoryColumnIndex, categoryName);
chartData.getCategories().add(categoryCell);
const valueCell = workbook.getCell(worksheetIndex, dataRowIndex, firstSeriesColumnIndex, seriesValue);
series.getDataPoints().addDataPointForBarSeries(valueCell);
}
const automaticSeriesColor = series.getAutomaticSeriesColor();
series.getFormat().getFill().setFillType(solidFillType);
series.getFormat().getFill().getSolidFillColor().setColor(automaticSeriesColor);
series.setInvertIfNegative(true);
series.getInvertedSolidFillColor().setColor(redColor);
presentation.save("inverted_solid_fill_color.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
El resultado:
Puede habilitar la inversión para un punto mediante ChartDataPoint.setInvertIfNegative. En el siguiente ejemplo, la inversión está deshabilitada para la serie y habilitada solo para el punto seleccionado. Al punto también se le asigna un valor negativo para que el efecto sea visible:
const aspose = {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const targetDataPointIndex = 2;
const negativeValue = -30;
const solidFillType = java.newByte(aspose.slides.FillType.Solid);
const redColor = java.getStaticFieldValue("java.awt.Color", "RED");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(firstSlideIndex);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);
const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
const automaticSeriesColor = series.getAutomaticSeriesColor();
series.getFormat().getFill().setFillType(solidFillType);
series.getFormat().getFill().getSolidFillColor().setColor(automaticSeriesColor);
series.getInvertedSolidFillColor().setColor(redColor);
series.setInvertIfNegative(false);
const dataPoint = series.getDataPoints().get_Item(targetDataPointIndex);
dataPoint.getValue().getAsCell().setValue(negativeValue);
dataPoint.setInvertIfNegative(true);
presentation.save("data_point_invert_color_if_negative.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Borrar un valor específico de punto de datos
Para dejar vacío un punto sin eliminar los demás, establezca su celda de respaldo en el libro de trabajo a null. En un gráfico de columnas, el valor trazado está disponible a través de ChartDataPoint.getValue. El punto de datos permanece en la misma posición de categoría, pero el gráfico trata su valor como vacío según la configuración de valores en blanco del gráfico.
El siguiente ejemplo borra solo el segundo punto de la primera serie:
const aspose = {};
aspose.slides = require("aspose.slides.via.java");
const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const targetDataPointIndex = 1;
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(firstSlideIndex);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.ClusteredColumn, 20, 20, 500, 200);
const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
const dataPoint = series.getDataPoints().get_Item(targetDataPointIndex);
dataPoint.getValue().getAsCell().setValue(null);
presentation.save("clear_data_point_value.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Los gráficos de dispersión utilizan celdas X e Y separadas, y los gráficos de burbujas también usan una celda de tamaño. Borre solo la celda que representa el valor que desea eliminar. No llame a ChartDataPointCollection.clear cuando quiera conservar los demás puntos, ya que ese método elimina todos los puntos de datos de la colección.
Establecer el ancho del espacio de la serie
El ancho del espacio es el espacio entre grupos de barras o columnas adyacentes, expresado como un porcentaje del ancho de la barra o columna. Al igual que el solapamiento, pertenece al grupo de series padre en lugar de a una serie individual. Llame a ChartSeriesGroup.setGapWidth una vez para el grupo. Un valor mayor crea más espacio entre los grupos; un valor menor los hace más densos.
El siguiente ejemplo cambia el ancho del espacio y guarda solo la presentación final:
const aspose = {};
aspose.slides = require("aspose.slides.via.java");
const firstSlideIndex = 0;
const firstSeriesIndex = 0;
const gapWidthPercent = 30;
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(firstSlideIndex);
const chart = slide.getShapes().addChart(aspose.slides.ChartType.StackedColumn, 20, 20, 500, 200);
const series = chart.getChartData().getSeries().get_Item(firstSeriesIndex);
series.getParentSeriesGroup().setGapWidth(gapWidthPercent);
presentation.save("gap_width_30.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
El resultado:
Preguntas frecuentes
¿Qué tipos de gráfico admiten series de datos?
Todos los tipos de gráfico representados por la enumeración ChartType utilizan datos de gráfico, pero sus series no comparten la misma estructura de valores ni la misma configuración. Por ejemplo, los gráficos de categorías usan categorías y valores, los gráficos de dispersión utilizan valores X e Y, y los gráficos de burbujas añaden tamaños de burbuja. Utilice el método de creación de puntos de datos que coincida con el tipo de serie. Opciones como solapamiento y ancho del espacio se aplican solo a grupos de barras o columnas compatibles.
¿Qué es un grupo de series de gráfico?
Un ChartSeriesGroup contiene series compatibles que comparten configuraciones de trazado a nivel de grupo. Un gráfico combinado puede contener más de un grupo, por lo que cambiar el grupo al que se accede a través de una serie no necesariamente modifica todas las series del gráfico.
¿Un gráfico recién creado contiene datos predeterminados?
Sí. De manera predeterminada, ShapeCollection.addChart crea series, categorías y valores de muestra. Puede editar esas celdas o borrar tanto las colecciones de series como de categorías antes de añadir un conjunto de datos completamente personalizado. Una sobrecarga también puede crear un gráfico sin datos predeterminados.
¿Cómo se conectan los objetos del gráfico a las celdas del libro de trabajo?
Los nombres de las series, las etiquetas de categoría y los valores de los puntos de datos hacen referencia a celdas en un ChartDataWorkbook. Cambiar una celda referenciada actualiza el elemento correspondiente del gráfico. Cuando construya datos personalizados, mantenga alineadas las filas de categorías y las filas de valores de series para que cada punto se trace bajo la categoría prevista.
¿Cómo borro un punto en lugar de toda la serie?
Establezca la celda de valor correspondiente a null para conservar la posición de categoría del punto como un punto vacío. Utilice ChartDataPointCollection.clear solo cuando desee eliminar todos los puntos de esa serie. Si también elimina categorías, actualice todas las series para que sus valores permanezcan alineados con la colección de categorías.
¿Cómo se muestran los puntos vacíos?
El resultado depende del tipo de gráfico y del valor configurado mediante Chart.setDisplayBlanksAs. Los gráficos compatibles pueden mostrar los vacíos como espacios, como valores cero o conectando los puntos vecinos. Elija la configuración que coincida con el significado de los datos ausentes en su presentación.
¿Cómo se formatean los valores negativos?
Para las series de barras, columnas y burbujas compatibles, llame a ChartSeries.setInvertIfNegative y establezca el color devuelto por ChartSeries.getInvertedSolidFillColor. Puede sobrescribir el comportamiento para un punto individual con ChartDataPoint.setInvertIfNegative. Estos métodos afectan al formato, no a los valores numéricos almacenados.
¿Qué formato prevalece cuando se formatean tanto una serie como un punto?
El formato explícito del punto de datos tiene prioridad para ese punto. Los demás puntos continúan usando el formato explícito de la serie o, cuando el formato de la serie no está definido, el estilo y tema automático del gráfico. Los ajustes de grupo como solapamiento y ancho del espacio controlan el diseño y no son sobrescrituras de formato a nivel de punto.
¿Existe un límite en la cantidad de series que puede contener un gráfico?
Aspose.Slides no impone un límite fijo separado para la cantidad de series. En la práctica, las limitaciones del archivo de la presentación, la memoria disponible, el tiempo de renderizado y la legibilidad del gráfico determinan un límite útil.
¿Qué debo cambiar cuando las columnas están demasiado juntas o demasiado separadas?
Llame a ChartSeriesGroup.setGapWidth en el grupo de series padre correspondiente. Aumente el valor para ampliar el espacio entre los grupos, o disminúyalo para acercar los grupos entre sí.