Personalizza i Punti Dati nei Diagrammi Treemap e Sunburst Utilizzando JavaScript

Introduzione

Tra gli altri tipi di diagrammi PowerPoint, esistono due tipologie “gerarchiche” – il diagramma Treemap e il diagramma Sunburst (noto anche come Sunburst Graph, Sunburst Diagram, Radial Chart, Radial Graph o Multi Level Pie Chart). Questi diagrammi visualizzano dati gerarchici organizzati come un albero – dalle foglie fino alla cima del ramo. Le foglie sono definite dai punti dati della serie, e ogni livello di raggruppamento annidato successivo è definito dalla corrispondente categoria. Aspose.Slides per Node.js tramite Java consente di formattare i punti dati dei diagrammi Sunburst e Treemap in JavaScript.

Ecco un diagramma Sunburst, dove i dati nella colonna Series1 definiscono i nodi foglia, mentre le altre colonne definiscono i punti dati gerarchici:

Iniziamo aggiungendo un nuovo diagramma Sunburst alla presentazione:

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();
    }
}

Vedi anche

• Crea o Aggiorna Diagrammi PowerPoint in JavaScript

Se è necessario formattare i punti dati del diagramma, dovremmo utilizzare il seguente:

ChartDataPointLevelsManager, ChartDataPointLevel classi e il metodo ChartDataPoint.getDataPointLevels forniscono l’accesso per formattare i punti dati dei diagrammi Treemap e Sunburst. ChartDataPointLevelsManager è usato per accedere alle categorie a più livelli – rappresenta il contenitore degli oggetti ChartDataPointLevel. In sostanza è un wrapper per ChartCategoryLevelsManager con proprietà aggiunte specifiche per i punti dati. La classe ChartDataPointLevel ha due metodi: getFormat e getDataLabel che forniscono l’accesso alle impostazioni corrispondenti.

Mostra Valore del Punto Dati

Mostra il valore del punto dati “Leaf 4”:

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

Imposta Etichetta e Colore del Punto Dati

Imposta l’etichetta del punto dati “Branch 1” per mostrare il nome della serie (“Series1”) invece del nome della categoria. Poi imposta il colore del testo a giallo:

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"));

Imposta Colore del Ramo del Punto Dati

Cambia il colore del 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();
    }
}

FAQ

Posso cambiare l’ordine (ordinamento) dei segmenti in Sunburst/Treemap?

No. PowerPoint ordina i segmenti automaticamente (tipicamente per valori decrescenti, in senso orario). Aspose.Slides replica questo comportamento: non è possibile cambiare direttamente l’ordine; lo si ottiene pre-elaborando i dati.

Come influisce il tema della presentazione sui colori dei segmenti e delle etichette?

I colori del diagramma ereditano il tema/palette della presentazione, a meno che non si impostino esplicitamente riempimenti/font. Per risultati coerenti, bloccare riempimenti solidi e formattazione del testo ai livelli necessari.

L’esportazione in PDF/PNG manterrà i colori personalizzati dei rami e le impostazioni delle etichette?

Sì. Durante l’esportazione della presentazione, le impostazioni del diagramma (riempimenti, etichette) vengono preservate nei formati di output perché Aspose.Slides rende il diagramma con la formattazione applicata.

Posso calcolare le coordinate effettive di un’etichetta/elemento per posizionare sovrapposizioni personalizzate sopra il diagramma?

Sì. Dopo che il layout del diagramma è stato convalidato, sono disponibili le coordinate X reale e Y reale per gli elementi (ad esempio un DataLabel), il che aiuta a posizionare con precisione le sovrapposizioni.