Personalizar Pontos de Dados em Gráficos Treemap e Sunburst Usando JavaScript

Introdução

Entre outros tipos de gráficos do PowerPoint, existem dois tipos “hierárquicos” – Treemap e Sunburst chart (também conhecido como Sunburst Graph, Sunburst Diagram, Radial Chart, Radial Graph ou Multi Level Pie Chart). Esses gráficos exibem dados hierárquicos organizados como uma árvore – das folhas até o topo do ramo. As folhas são definidas pelos pontos de dados da série, e cada nível de agrupamento aninhado subsequente é definido pela categoria correspondente. Aspose.Slides for Node.js via Java permite formatar os pontos de dados do Gráfico Sunburst e Treemap em JavaScript.

Aqui está um Gráfico Sunburst, onde os dados na coluna Series1 definem os nós folha, enquanto as outras colunas definem pontos de dados hierárquicos:

Vamos começar adicionando um novo gráfico Sunburst à apresentação:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.Sunburst, 100, 100, 450, 400);
    // ...
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Veja também

• Criar ou Atualizar Gráficos de Apresentação PowerPoint em JavaScript

Se houver necessidade de formatar os pontos de dados do gráfico, devemos usar o seguinte:

ChartDataPointLevelsManager, ChartDataPointLevel classes and ChartDataPoint.getDataPointLevels method provide access to format data points of Treemap and Sunburst charts. ChartDataPointLevelsManager is used for accessing multi-level categories - it represents the container of ChartDataPointLevel objects. Basically it is a wrapper for ChartCategoryLevelsManager with the properties added specific for data points. ChartDataPointLevel class has two methods: getFormat and getDataLabel which provide access to corresponding settings.

Mostrar Valor do Ponto de Dados

Mostrar o valor do ponto de dados “Leaf 4”:

var dataPoints = chart.getChartData().getSeries().get_Item(0).getDataPoints();
dataPoints.get_Item(3).getDataPointLevels().get_Item(0).getLabel().getDataLabelFormat().setShowValue(true);

Definir Rótulo e Cor do Ponto de Dados

Defina o rótulo de dados de “Branch 1” para mostrar o nome da série (“Series1”) em vez do nome da categoria. Em seguida, defina a cor do texto para amarelo:

var branch1Label = dataPoints.get_Item(0).getDataPointLevels().get_Item(0).getLabel();
branch1Label.getDataLabelFormat().setShowCategoryName(false);
branch1Label.getDataLabelFormat().setShowSeriesName(true);
branch1Label.getDataLabelFormat().getTextFormat().getPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
branch1Label.getDataLabelFormat().getTextFormat().getPortionFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "YELLOW"));

Definir Cor do Ramo do Ponto de Dados

Alterar a cor do ramo “Steam 4”:

var pres = new aspose.slides.Presentation();
try {
    var chart = pres.getSlides().get_Item(0).getShapes().addChart(aspose.slides.ChartType.Sunburst, 100, 100, 450, 400);
    var dataPoints = chart.getChartData().getSeries().get_Item(0).getDataPoints();
    var stem4branch = dataPoints.get_Item(9).getDataPointLevels().get_Item(1);
    stem4branch.getFormat().getFill().setFillType(java.newByte(aspose.slides.FillType.Solid));
    stem4branch.getFormat().getFill().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
    pres.save("pres.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Perguntas Frequentes

Posso mudar a ordem (classificação) dos segmentos em Sunburst/Treemap?

Não. O PowerPoint classifica os segmentos automaticamente (normalmente por valores decrescentes, no sentido horário). O Aspose.Slides espelha esse comportamento: você não pode mudar a ordem diretamente; ela é obtida pré-processando os dados.

Como o tema da apresentação afeta as cores dos segmentos e rótulos?

As cores do gráfico herdam o tema/palette da apresentação, a menos que você defina explicitamente preenchimentos/fonte. Para resultados consistentes, defina preenchimentos sólidos e formatação de texto nos níveis necessários.

A exportação para PDF/PNG preservará as cores de ramo personalizadas e as configurações de rótulo?

Sim. Ao exportar a apresentação, as configurações do gráfico (preenchimentos, rótulos) são preservadas nos formatos de saída porque o Aspose.Slides renderiza com a formatação do gráfico aplicada.

Posso calcular as coordenadas reais de um rótulo/elemento para posicionamento de sobreposição personalizada sobre o gráfico?

Sim. Após a validação do layout do gráfico, X real e Y real estão disponíveis para os elementos (por exemplo, um DataLabel), que ajuda no posicionamento preciso de sobreposições.