Sesuaikan Sumbu Bagan dalam Presentasi Menggunakan JavaScript

Tentang apa halaman ini

Temukan cara menggunakan JavaScript dengan Aspose.Slides untuk Node.js melalui Java untuk menyesuaikan sumbu bagan dalam presentasi PowerPoint bagi laporan dan visualisasi.

Ikhtisar

Artikel ini menjelaskan cara menyesuaikan sumbu bagan dengan Aspose.Slides untuk Node.js melalui Java. Ini mencakup nilai sumbu yang dihitung, menukar baris dan kolom bagan, visibilitas sumbu, interval label kategori dan tanda centang, kategori tanggal serta pemformatannya, rotasi judul, posisi sumbu, dan satuan tampilan.

Dapatkan Nilai Maksimum pada Sumbu Vertikal pada Bagan

Buat sebuah Presentation dan tambahkan bagan area dengan data default. Panggil validateChartLayout sebelum membaca nilai sumbu yang dihitung sehingga tata letak bagan terbaru.

Baca getActualMaxValue dan getActualMinValue untuk batas sumbu, serta getActualMajorUnit dan getActualMinorUnit untuk interval tanda. getActualMajorUnitScale dan getActualMinorUnitScale menyediakan skala satuan waktu, yang relevan untuk sumbu tanggal. Contoh menyimpan nilai‑nilai ini ke dalam variabel lokal dan menyimpan bagan.

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

Tukar Data Antara Sumbu

Gunakan switchRowColumn untuk menukar peran seri dan kategori dalam data bagan. Setiap kategori sebelumnya menjadi seri, dan setiap seri sebelumnya menjadi kategori. Ini mengubah cara data dikelompokkan; tidak menukar sumbu horizontal dan vertikal. Contoh menggunakan setRange untuk mengikat data default ke Sheet1!A1:D5, termasuk baris header dan kolom kategori, sebelum menukar baris dan kolom. Ia menyimpan bagan dengan empat seri dan tiga kategori.

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

Nonaktifkan Sumbu Vertikal untuk Bagan Garis

Panggil setVisible dengan false pada sumbu vertikal untuk menyembunyikannya. Contoh membuat bagan garis dengan data default dan menyimpannya dengan sumbu vertikal tersembunyi.

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

Nonaktifkan Sumbu Horizontal untuk Bagan Garis

Panggil setVisible dengan false pada sumbu horizontal untuk menyembunyikannya. Contoh membuat bagan garis dengan data default dan menyimpannya dengan sumbu horizontal tersembunyi.

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

Ubah Sumbu Kategori

Gunakan setCategoryAxisType untuk memilih sumbu kategori tanggal atau teks. Contoh ini memerlukan ExistingChart.pptx, dengan bagan sebagai bentuk pertama pada slide pertama dan sel kategori yang berisi nilai tanggal Excel numerik. Ia mengubah sumbu horizontal menjadi sumbu tanggal. Memanggil setAutomaticMajorUnit dengan false, setMajorUnit dengan 1, dan setMajorUnitScale dengan TimeUnitType.Months menempatkan tanda utama pada interval satu bulan.

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

Kontrol Interval Label Sumbu Kategori

Ketika sebuah bagan memiliki banyak kategori, kurangi jumlah label sumbu yang terlihat tanpa menghapus kategori atau titik data. Panggil setAutomaticTickLabelSpacing dengan false, lalu berikan interval kategori yang diinginkan ke setTickLabelSpacing. Untuk kategori teks dalam urutan normal, penghitungan dimulai dari kategori pertama:

Interval	Label yang ditampilkan dalam contoh
1	Kategori 1, Kategori 2, Kategori 3, … Kategori 24
2	Kategori 1, Kategori 3, Kategori 5, … Kategori 23
3	Kategori 1, Kategori 4, Kategori 7, … Kategori 22

Interval 3 menampilkan setiap label ketiga, meninggalkan dua label tersembunyi di antara label yang ditampilkan. Ini tidak menghapus kolom yang bersangkutan. Penempatan otomatis memilih interval berdasarkan ruang yang tersedia; tidak selalu menampilkan setiap label.

Tanda centang memiliki kontrol terpisah. Panggil setAutomaticTickMarksSpacing dengan false dan gunakan setTickMarksSpacing untuk mengatur intervalnya. Misalnya, 1 mempertahankan tanda centang pada setiap interval kategori sementara label hanya muncul setiap tiga kategori. Gunakan setMajorTickMark dengan gaya yang terlihat agar Anda dapat melihat hasilnya. Memanggil salah satu pengatur penempatan otomatis dengan true kembali memungkinkan bagan memilih interval tersebut lagi.

Contoh mandiri berikut membuat 24 kategori dan satu seri, lalu menyimpan tiga slide dalam CategoryAxisIntervals.pptx: penempatan otomatis, penempatan label manual dengan tanda centang independen, dan pemulihan penempatan otomatis. Kedua salinan mempertahankan data bagan asli. Tidak diperlukan presentasi masukan. Teks label horizontal memudahkan melihat perbedaan kepadatan.

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

    // Slide 2: tampilkan setiap label ketiga, tetapi pertahankan tanda centang untuk setiap kategori.
    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);

    // Slide 3: biarkan bagan memilih kedua interval lagi.
    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();
}

Penempatan otomatis (slide 1): Dalam rendering ini, setiap label kategori kedua ditampilkan dan melipat menjadi dua baris. Hasil otomatis dapat bervariasi tergantung pada ukuran bagan, font, dan renderer.

Penempatan manual (slide 2): Setiap label ketiga ditampilkan pada satu baris, sementara tanda centang tetap pada setiap interval kategori. Semua 24 kolom, termasuk yang tanpa label, tetap terlihat dengan nilai yang sama. Slide 3 mengembalikan tampilan otomatis yang ditunjukkan di atas.

Pilih Sumbu dan Interval yang Tepat

Gunakan interval hitungan kategori ini untuk sumbu kategori teks, seperti sumbu kategori pada diagram kolom, garis, area, atau batang. Pada diagram kolom, ini adalah sumbu horizontal. Pada diagram batang horizontal, sumbu kategori berada secara vertikal, sehingga terapkan pengaturan ini pada sumbu yang dikembalikan oleh getVerticalAxis. Penempatan tanda centang juga berlaku pada sumbu seri dalam bagan yang memilikinya.

Jangan gunakan penempatan label kategori untuk mengatur skala numerik pada sumbu nilai. Pada sumbu nilai, setMajorUnit menentukan selisih nilai: misalnya, satuan utama 10 menghasilkan tanda pada 0, 10, 20, dan seterusnya ketika sumbu dimulai dari nol. Interval label kategori 3 menghitung posisi kategori, terlepas dari nilai data mereka. Bagan pencar dan gelembung menggunakan sumbu nilai bukan sumbu kategori teks. Untuk sumbu tanggal, gunakan satuan utama berbasis waktu dan skala seperti yang dijelaskan pada Ubah Sumbu Kategori.

Atur Format Tanggal untuk Nilai Sumbu Kategori

Contoh ini menggantikan data bagan default dengan empat nilai tahunan. Tanggal disimpan sebagai nomor seri OLE Automation di lembar kerja pertama (indeks 0), dihitung sebagai jumlah hari sejak 30 Desember 1899, untuk tanggal‑tanggal ini. Perhitungan JavaScript menggunakan cap waktu UTC dan membagi selisihnya dengan 86.400.000 milidetik per hari. Gunakan setCategoryAxisType dengan CategoryAxisType.Date, panggil setNumberFormatLinkedToSource dengan false, dan berikan yyyy ke setNumberFormat sehingga label kategori menampilkan empat digit tahun secara independen dari pemformatan sel.

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

Atur Sudut Rotasi untuk Judul Sumbu Diagram

Panggil setTitle dengan true pada sumbu vertikal, berikan teks judul, dan gunakan setRotationAngle untuk memutar judul. Sudut diukur dalam derajat; contoh ini menyimpan diagram kolom dengan judul sumbu nilai diputar 90 derajat.

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

Atur Posisi Sumbu pada Sumbu Kategori atau Nilai

Gunakan setAxisBetweenCategories untuk mengontrol apakah sumbu nilai memotong sumbu kategori di antara kategori atau pada tanda kategori. Pengaturan ini berlaku untuk sumbu kategori. Contoh mengaturnya menjadi true pada sumbu kategori horizontal diagram kolom dan menyimpan hasilnya.

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

Atur Satuan Tampilan pada Sumbu Nilai Diagram

Gunakan setDisplayUnit untuk menskala label pada sumbu nilai tanpa mengubah data dasar. Dengan DisplayUnitType disetel ke Millions, nilai 60.000.000 ditampilkan sebagai 60. Contoh ini membuat diagram kolom dan menerapkan satuan tampilan jutaan pada sumbu vertikalnya.

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

FAQ

Bagaimana cara saya mengatur nilai di mana satu sumbu memotong sumbu lain (penyilangan sumbu)?

Gunakan setCrossType untuk memilih perilaku penyilangan. Untuk menentukan nilai penyilangan numerik, gunakan setCrossAt. Pengaturan ini memungkinkan Anda memindahkan penyilangan sumbu ke garis dasar yang sesuai.

Bagaimana saya dapat menempatkan label tanda pada relatif terhadap sumbu?

Panggil setTickLabelPosition menggunakan TickLabelPositionType: Low, High, NextTo, atau None. Untuk mengontrol tanda centang itu sendiri, gunakan setMajorTickMark atau setMinorTickMark; ini terpisah dari penempatan label.