Sesuaikan Titik Data dalam Diagram Treemap dan Sunburst Menggunakan JavaScript

Pendahuluan

Di antara jenis diagram PowerPoint lainnya, ada dua jenis “hierarki” - Treemap dan Sunburst (juga dikenal sebagai Sunburst Graph, Sunburst Diagram, Radial Chart, Radial Graph, atau Multi Level Pie Chart). Diagram ini menampilkan data hierarki yang diatur seperti pohon - dari daun hingga puncak cabang. Daun didefinisikan oleh titik data seri, dan setiap tingkat pengelompokan bersarang berikutnya didefinisikan oleh kategori yang bersangkutan. Aspose.Slides untuk Node.js via Java memungkinkan memformat titik data Sunburst Chart dan Treemap dalam JavaScript.

Berikut adalah Sunburst Chart, di mana data pada kolom Series1 mendefinisikan node daun, sementara kolom lainnya mendefinisikan datapoint hierarki:

Mulailah dengan menambahkan diagram Sunburst baru ke presentasi:

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

Lihat juga

• Buat atau Perbarui Diagram Presentasi PowerPoint dalam JavaScript

Jika perlu memformat titik data diagram, kita harus menggunakan yang berikut:

ChartDataPointLevelsManager, ChartDataPointLevel kelas dan ChartDataPoint.getDataPointLevels metode menyediakan akses untuk memformat titik data Treemap dan Sunburst. ChartDataPointLevelsManager digunakan untuk mengakses kategori multi‑level ‑ ini merupakan kontainer dari ChartDataPointLevel objek. Pada dasarnya ini adalah pembungkus untuk ChartCategoryLevelsManager dengan properti yang ditambahkan khusus untuk titik data. Kelas ChartDataPointLevel memiliki dua metode: getFormat dan getDataLabel yang menyediakan akses ke pengaturan yang bersangkutan.

Tampilkan Nilai Titik Data

Tampilkan nilai titik data “Leaf 4”:

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

Atur Label dan Warna Titik Data

Atur label data “Branch 1” agar menampilkan nama seri (“Series1”) alih-alih nama kategori. Kemudian atur warna teks menjadi kuning:

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

Atur Warna Cabang Titik Data

Ubah warna cabang “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

Apakah saya dapat mengubah urutan (pengurutan) segmen dalam Sunburst/Treemap?

Tidak. PowerPoint mengurutkan segmen secara otomatis (biasanya berdasarkan nilai menurun, searah jarum jam). Aspose.Slides meniru perilaku ini: Anda tidak dapat mengubah urutan secara langsung; Anda harus melakukannya dengan memproses data terlebih dahulu.

Bagaimana tema presentasi memengaruhi warna segmen dan label?

Warna diagram mewarisi theme/palette presentasi kecuali Anda secara eksplisit mengatur isian/font. Untuk hasil yang konsisten, kunci isian solid dan format teks pada tingkat yang diperlukan.

Apakah ekspor ke PDF/PNG mempertahankan warna cabang khusus dan pengaturan label?

Ya. Saat mengekspor presentasi, pengaturan diagram (isi, label) dipertahankan dalam format output karena Aspose.Slides merender dengan format diagram yang diterapkan.

Apakah saya dapat menghitung koordinat sebenarnya dari label/elemen untuk penempatan overlay khusus di atas diagram?

Ya. Setelah tata letak diagram divalidasi, nilai X aktual dan Y aktual tersedia untuk elemen (misalnya, DataLabel), yang membantu penempatan overlay secara tepat.