JavaScript를 사용하여 프레젠테이션에서 차트 축 사용자 지정

이 페이지의 내용

보고서와 시각화를 위한 PowerPoint 프레젠테이션에서 차트 축을 사용자 지정하기 위해 Java를 통해 Node.js용 Aspose.Slides와 JavaScript를 사용하는 방법을 알아보세요.

개요

이 문서에서는 Java를 통해 Aspose.Slides for Node.js를 사용하여 차트 축을 사용자 지정하는 방법을 설명합니다. 계산된 축 값, 차트 행과 열 전환, 축 표시 여부, 범주 레이블 및 눈금 간격, 날짜 범주 및 서식, 제목 회전, 축 위치 지정 및 표시 단위 등을 다룹니다.

차트의 수직 축에서 최대값 가져오기

기본 데이터가 포함된 영역 차트를 추가하기 위해 Presentation을 생성합니다. 계산된 축 값을 읽기 전에 차트 레이아웃을 최신 상태로 유지하기 위해 validateChartLayout을 호출합니다.

축 한계를 얻기 위해 getActualMaxValue 및 getActualMinValue을 읽고, 눈금 간격을 위해 getActualMajorUnit 및 getActualMinorUnit을 읽습니다. getActualMajorUnitScale 및 getActualMinorUnitScale은 날짜 축과 관련된 시간 단위 스케일을 제공합니다. 예제에서는 이러한 값을 로컬 변수에 저장하고 차트를 저장합니다.

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

축 간 데이터 교환

차트 데이터에서 시리즈와 범주의 역할을 교환하려면 switchRowColumn을 사용합니다. 이전의 각 범주는 시리즈가 되고, 이전의 각 시리즈는 범주가 됩니다. 이는 데이터 그룹화 방식을 변경하지만, 가로 및 세로 축을 교환하지는 않습니다. 예제에서는 행과 열을 전환하기 전에 setRange를 사용하여 기본 데이터를 Sheet1!A1:D5(머리글 행과 범주 열 포함)에 바인딩합니다. 네 개의 시리즈와 세 개의 범주가 있는 차트를 저장합니다.

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

라인 차트에서 수직 축 비활성화

setVisible를 false와 함께 수직 축에 호출하여 숨깁니다. 예제에서는 기본 데이터가 있는 라인 차트를 생성하고 수직 축이 숨겨진 상태로 저장합니다.

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

라인 차트에서 가로 축 비활성화

setVisible를 false와 함께 가로 축에 호출하여 숨깁니다. 예제에서는 기본 데이터가 있는 라인 차트를 생성하고 가로 축이 숨겨진 상태로 저장합니다.

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

범주 축 변경

setCategoryAxisType를 사용하여 날짜 또는 텍스트 범주 축을 선택합니다. 이 예제는 첫 슬라이드의 첫 번째 도형인 차트와 범주 셀에 숫자 형식 Excel 날짜 값이 포함된 ExistingChart.pptx가 필요합니다. 가로 축을 날짜 축으로 변경합니다. setAutomaticMajorUnit를 false와 함께 호출하고, setMajorUnit를 1로 설정하며, setMajorUnitScale를 TimeUnitType.Months로 설정하면 주요 눈금이 한 달 간격으로 배치됩니다.

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

범주 축 레이블 간격 제어

차트에 많은 범주가 있을 때, 범주나 데이터 포인트를 제거하지 않고 표시되는 축 레이블 수를 줄일 수 있습니다. setAutomaticTickLabelSpacing을 false와 함께 호출한 뒤 원하는 범주 간격을 setTickLabelSpacing에 전달합니다. 일반 순서의 텍스트 범주의 경우, 첫 번째 범주부터 카운트가 시작됩니다:

간격	예제에 표시된 레이블
1	범주 1, 범주 2, 범주 3, … 범주 24
2	범주 1, 범주 3, 범주 5, … 범주 23
3	범주 1, 범주 4, 범주 7, … 범주 22

간격이 3이면 세 번째 레이블마다 표시되며, 표시된 레이블 사이에 두 개의 레이블이 숨겨집니다. 해당 열은 제거되지 않습니다. 자동 간격은 사용 가능한 공간을 기준으로 간격을 선택하며, 반드시 모든 레이블을 표시하는 것은 아닙니다.

눈금 표시에는 별도의 제어가 있습니다. setAutomaticTickMarksSpacing을 false와 함께 호출하고 setTickMarksSpacing으로 간격을 설정합니다. 예를 들어, 1은 각 범주 간격마다 눈금 표시를 유지하지만 레이블은 세 번째 범주마다만 표시됩니다. setMajorTickMark를 사용하여 눈에 보이는 스타일을 적용하면 결과를 확인할 수 있습니다. 자동 간격 설정자를 true로 다시 호출하면 차트가 해당 간격을 다시 선택합니다.

다음의 독립 실행형 예제는 24개의 범주와 하나의 시리즈를 생성한 후 CategoryAxisIntervals.pptx에 세 개의 슬라이드를 저장합니다: 자동 간격, 독립 눈금 표시가 있는 수동 레이블 간격, 그리고 복원된 자동 간격. 두 사본은 원본 차트 데이터를 유지합니다. 입력 프레젠테이션이 필요하지 않습니다. 가로 레이블 텍스트는 밀도 차이를 쉽게 확인할 수 있게 합니다.

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: 세 번째 레이블마다 표시하지만, 각 범주마다 눈금 표시를 유지합니다.
    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: 차트가 두 간격을 다시 선택하도록 합니다.
    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();
}

자동 간격 (슬라이드 1): 이 렌더링에서는 두 번째마다 범주 레이블이 표시되고 두 줄로 자동 줄바꿈됩니다. 자동 결과는 차트 크기, 글꼴 및 렌더러에 따라 달라질 수 있습니다.

수동 간격 (슬라이드 2): 세 번째마다 레이블이 한 줄에 표시되며, 눈금 표시는 모든 범주 간격에 유지됩니다. 레이블이 없는 것을 포함한 24개 모든 열이 동일한 값으로 표시됩니다. 슬라이드 3은 위의 자동 표시를 복원합니다.

올바른 축 및 간격 선택

텍스트 범주 축(예: 열, 선, 영역 또는 막대 차트의 범주 축)에는 이 범주 수 간격을 사용합니다. 열 차트에서는 가로 축이 됩니다. 수평 막대 차트에서는 범주 축이 세로이므로, 이러한 설정을 getVerticalAxis으로 반환되는 축에 적용합니다. 눈금 간격은 시리즈 축이 있는 차트에도 적용됩니다.

범주 레이블 간격을 사용하여 값 축의 수치 스케일을 설정하지 마십시오. 값 축에서는 setMajorUnit가 값의 차이를 지정합니다: 예를 들어, 주요 단위가 10이면 축이 0에서 시작할 때 0, 10, 20 등으로 눈금이 표시됩니다. 3의 범주 레이블 간격은 데이터 값에 관계없이 범주 위치를 셉니다. 산점도 및 버블 차트는 텍스트 범주 축이 아닌 값 축을 사용합니다. 날짜 축의 경우, Change a Category Axis에서 설명한 대로 시간 기반 주요 단위와 스케일을 사용하십시오.

범주 축 값에 대한 날짜 형식 설정

예제에서는 기본 차트 데이터를 네 개의 연간 값으로 교체합니다. 날짜는 첫 번째 워크시트(인덱스 0)에 OLE Automation 일련번호로 저장되며, 이는 1899년 12월 30일부터의 일수로 계산됩니다. JavaScript 계산은 UTC 타임스탬프를 사용하고 차이를 하루당 86,400,000밀리초로 나눕니다. setCategoryAxisType을 CategoryAxisType.Date와 함께 사용하고, setNumberFormatLinkedToSource을 false로 호출한 뒤, setNumberFormat에 yyyy를 전달하면 셀 서식과 무관하게 범주 레이블이 4자리 연도로 표시됩니다.

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

차트 축 제목에 회전 각도 설정

수직 축에 대해 setTitle를 true와 함께 호출하고 제목 텍스트를 제공한 뒤, setRotationAngle를 사용하여 제목을 회전합니다. 각도는 도 단위이며, 이 예제에서는 값 축 제목을 90도 회전시킨 열 차트를 저장합니다.

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

범주 또는 값 축에서 축 위치 설정

setAxisBetweenCategories를 사용하여 값 축이 범주 축을 범주 사이에서 교차할지, 범주 눈금에서 교차할지를 제어합니다. 이 설정은 범주 축에 적용됩니다. 예제에서는 열 차트의 가로 범주 축에 대해 이를 true로 설정하고 결과를 저장합니다.

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

차트 값 축에 표시 단위 설정

setDisplayUnit를 사용하면 기본 데이터를 변경하지 않고 값 축의 레이블을 스케일링할 수 있습니다. DisplayUnitType을 Millions로 설정하면 60,000,000 값이 60으로 표시됩니다. 예제에서는 열 차트를 생성하고 세로 축에 백만 단위 표시를 적용합니다.

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

한 축이 다른 축과 교차하는 값을 어떻게 설정합니까?

setCrossType를 사용하여 교차 동작을 선택합니다. 숫자 교차 값을 지정하려면 setCrossAt를 사용합니다. 이러한 설정을 통해 축 교차점을 적절한 기준선으로 이동시킬 수 있습니다.

눈금 레이블을 축에 상대적으로 어떻게 배치합니까?

setTickLabelPosition를 TickLabelPositionType을 사용하여 호출합니다: Low, High, NextTo, 또는 None. 눈금 표시 자체를 제어하려면 setMajorTickMark 또는 setMinorTickMark를 사용합니다; 이것은 레이블 위치 지정과 별개입니다.

---

title: JavaScript를 사용하여 프레젠테이션에서 차트 축 사용자 지정 linktitle: 차트 축 type: docs url: /ko/nodejs-java/chart-axis/ keywords:

• 차트 축
• 수직 축
• 수평 축
• 축 사용자 지정
• 축 조작
• 축 관리
• 축 속성
• 최대값
• 최소값
• 축 선
• 날짜 형식
• 축 제목
• 축 위치
• PowerPoint
• 프레젠테이션
• Node.js
• JavaScript
• Aspose.Slides description: “보고서와 시각화를 위한 PowerPoint 프레젠테이션에서 차트 축을 사용자 지정하기 위해 Java를 통해 Node.js용 Aspose.Slides와 JavaScript를 사용하는 방법을 알아보세요.”

---