축

SpreadJS에서는 차트의 표시 단위와 함께 축을 구성하고 사용자 지정할 수 있습니다.

축이란?

축은 가로 눈금(x축 또는 범주 축)과 세로 눈금(y축 또는 값 축)을 기준으로 플롯 영역의 차원을 나타냅니다.

차트 축 유형: 일반적으로 기본 2차원 차트에는 기본 범주 축, 기본 값 축, 보조 범주 축 및 보조 값 축의 네 가지 축 유형이 있습니다.

축 제목 텍스트 방향 설정

SpreadJS는 차트 축 제목의 텍스트 방향을 지원합니다. 이를 통해 Excel 통합 문서를 SpreadJS로 가져올 때 Excel 차트의 모양을 유지할 수 있습니다.

지원되는 축 제목 텍스트 방향은 다음과 같습니다.

방향	설명	샘플
가로	텍스트가 가로 방향으로 LTR 언어에서는 왼쪽에서 오른쪽으로, RTL 언어에서는 오른쪽에서 왼쪽으로 표시됩니다.
세로	주로 동아시아 언어에 사용되는 특수 모드입니다. 일부 글꼴은 90도 회전되어 표시될 수 있지만 대부분의 동아시아 글꼴은 위에서 아래로, 오른쪽에서 왼쪽으로 줄이 진행되는 세로 방향으로 표시됩니다.
모든 텍스트 90° 회전	각 텍스트 줄이 시계 방향으로 90도 회전되어 위에서 아래로 표시됩니다. 이후 줄은 이전 줄의 왼쪽에 표시됩니다.
모든 텍스트 270° 회전	각 텍스트 줄이 시계 방향으로 270도(또는 시계 반대 방향으로 90도) 회전되어 아래에서 위로 표시됩니다. 이후 줄은 이전 줄의 오른쪽에 표시됩니다.
쌓기	텍스트 문자가 한 글자씩 세로로 쌓이고 줄은 왼쪽에서 오른쪽으로 진행됩니다. 세로 텍스트 효과를 만드는 데 주로 사용됩니다.

세로 및 쌓기 텍스트 방향은 서로 다른 텍스트 레이아웃 동작을 사용합니다.

세로 텍스트 방향에서는 중국어나 일본어 문자와 같은 동아시아 문자가 세로로 표시됩니다. 라틴 문자와 숫자는 세로 텍스트 레이아웃 동작을 사용하여 표시되며 옆으로 회전되어 나타날 수 있습니다.
쌓기 텍스트 방향에서는 문자가 한 글자씩 세로로 배열됩니다. 즉, 동아시아 문자, 라틴 문자 및 숫자가 모두 똑바로 세워진 상태로 표시됩니다.

참고:
textDirection 옵션은 축 제목의 방향만 제어합니다. 자동 텍스트 줄 바꿈은 활성화하지 않습니다.

textDirection 옵션을 사용하여 축 제목의 텍스트 방향을 설정할 수 있습니다.

var axes = chart.axes();

axes.primaryValue.title.text = "Revenue";
axes.primaryValue.title.textDirection =
    GC.Spread.Sheets.Charts.TextDirection.vert;

chart.axes(axes);

패널에서는 가로, 세로, 모든 텍스트 90° 회전, 모든 텍스트 270° 회전 및 쌓기의 다섯 가지 텍스트 방향 옵션을 제공합니다.

SpreadJS Designer displays the axis title text-direction panel with Horizontal, Vertical, rotated, and Stacked options for chart formatting.

Excel 파일을 가져올 때 SpreadJS는 지원되는 축 제목 텍스트 방향을 읽어 적용합니다. 내보낼 때는 가능한 경우 텍스트 방향을 유지합니다.

값 축에 표시 단위 구성

표시 단위는 값 축(기본 값 축 및 보조 값 축)에만 구성할 수 있습니다. SpreadJS에서 차트를 사용할 때 축 표시 단위를 구성하는 방법은 두 가지입니다.

사용자는 표시 단위 값을 표시할 때 사용 가능한 미리 정의된 옵션 목록(없음, 백, 천, 10000, 100000, 백만, 100000000000, 10000000000, 십억, 조 등)에서 선택할 수 있습니다.
사용자는 기본 제공 옵션에 없는 의미 있는 숫자 값을 사용하여 사용자 지정 표시 단위를 정의할 수 있습니다. 단, 사용자가 지정하는 사용자 지정 표시 단위 값은 양수여야 합니다. 또한 사용자 지정 축 표시 단위를 정의할 때 문자열과 같은 사용자 지정 텍스트 값은 지원되지 않습니다.

다음 스크린샷은 기본 값 축에 기본 제공 표시 단위를 구성하고 보조 값 축에 사용자 지정 표시 단위를 구성한 차트를 보여줍니다.

SpreadJS chart applies a built-in display unit to the primary value axis and a custom numeric display unit to the secondary value axis.

사용자는 차트의 축을 가져오거나 설정할 수 있습니다. 차트를 사용할 때 특정 요구 사항과 기본 설정에 따라 축 표시 단위를 추가, 수정 및 사용자 지정할 수 있습니다. 차트에서 축 표시 단위를 삭제하려면 축 표시 단위 값을 null로 설정해야 합니다.

지원되는 차트 유형 - 값 축이 포함된 모든 차트 유형에서 축 표시 단위를 구성할 수 있습니다. 따라서 기본 값 축과 보조 값 축만 지원됩니다.

표시 단위 레이블 사용자 지정

축 표시 단위를 사용할 때 표시 단위 레이블을 표시하거나 숨길 수 있습니다. 또한 글꼴, 글꼴 색 및 글꼴 패밀리를 변경하여 표시 단위 레이블의 기본 모양을 수정할 수 있습니다.

참고: 차트에서 축 표시 단위를 구성하고 사용자 지정할 때 다음 제한 사항에 유의해야 합니다.
JSON I/O를 수행할 때 DisplayUnit의 모든 속성이 지원됩니다. 그러나 Excel I/O를 수행할 때 DisplayUnit에 스타일 정보가 설정되어 있으면 Excel 파일의 XML에 저장되지 않습니다. 따라서 표시 단위 레이블의 스타일이 XML 파일에서 손실됩니다.
이 기능은 표시 단위 레이블 텍스트의 사용자 지정을 지원하지 않습니다.

다음 코드 샘플에서는 차트에서 표시 단위 레이블과 함께 축을 구성하는 방법을 보여줍니다.

document.addEventListener("DOMContentLoaded", function () {
    // Initializing Spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

    // Get the activesheet
    var activeSheet = spread.getActiveSheet();
    activeSheet.suspendPaint();
    // Prepare data for chart
    activeSheet.setValue(0, 1, "Y-2015");
    activeSheet.setValue(0, 2, "Y-2016");
    activeSheet.setValue(0, 3, "Y-2017");
    activeSheet.setValue(0, 4, "Y-2018");
    activeSheet.setValue(0, 5, "Y-2019");
    activeSheet.setValue(1, 0, "Gradlco Corp. Ltd");
    activeSheet.setValue(2, 0, "Saagiate Corp. Ltd.");
    activeSheet.setColumnWidth(0, 120);
    for (var r = 1; r <= 2; r++) {
        for (var c = 1; c <= 5; c++) {
            activeSheet.setValue(r, c, parseInt(Math.random() * 5000));
        }
    }

    // Add columnClustered chart
    chart_columnClustered = activeSheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 100, 500, 400);
    var series = chart_columnClustered.series();
    series.add({
        chartType: GC.Spread.Sheets.Charts.ChartType.columnClustered,
        axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
        name: "Sheet1!$A$2",
        xValues: "Sheet1!$B$1:$F$1",
        yValues: "Sheet1!$B$2:$D$2"
    });
    series.add({
        chartType: GC.Spread.Sheets.Charts.ChartType.line,
        axisGroup: GC.Spread.Sheets.Charts.AxisGroup.secondary,
        name: "Sheet1!$A$3",
        xValues: "Sheet1!$B$1:$F$1",
        yValues: "Sheet1!$B$3:$D$3"
    });
    var axes = chart_columnClustered.axes();

    // Configure Primary Category Axis
    axes.primaryCategory.style.color = 'green';
    axes.primaryCategory.title.color = 'green';
    axes.primaryCategory.title.text = 'Primary Category Axes';
    // Configure Primary Value Axis
    axes.primaryValue.style.color = 'blue';
    axes.primaryValue.title.color = 'blue';
    axes.primaryValue.title.text = 'Primary Value Axes';
    axes.primaryValue.title.fontSize = 16;
    // Configure BuiltIn DisplayUnit for "Primary Value Axis"
    axes.primaryValue.displayUnit = {
        unit: GC.Spread.Sheets.Charts.DisplayUnit.thousands, // BuiltIn DisplayUnit is thousands
        visible: true,
        style: {
            color: 'red',
            transparency: 0.1,
            fontFamily: 'arial',
            fontSize: 14
        }
    };
    // Configure Secondary Category Axis
    axes.secondaryCategory.visible = true;
    axes.secondaryCategory.style.color = 'green';
    axes.secondaryCategory.title.color = 'green';
    axes.secondaryCategory.title.text = 'Secondary Category Axes';
    axes.secondaryCategory.title.fontSize = 16;
    // Configure Custom DisplayUnit for "Secondary Value Axis"
    axes.secondaryValue.displayUnit = {
        unit: 500, // Custom Display unit is 500
        visible: true,
        style: {
            color: 'red',
            transparency: 0.1,
            fontFamily: 'Verdana',
            fontSize: 14
        }
    };
    // Configure Secondary Value Axis
    axes.secondaryValue.style.color = 'blue';
    axes.secondaryValue.title.color = 'blue';
    axes.secondaryValue.format = 'General';
    axes.secondaryValue.title.text = 'Secondary Value Axes';
    chart_columnClustered.axes(axes);
    // Configure Chart Title
    var title = chart_columnClustered.title();
    title.text = "Annual Sales Record";
    title.fontFamily = "Cambria";
    title.fontSize = 28;
    title.color = "Red";
    chart_columnClustered.title(title);
    activeSheet.resumePaint();
});

범주 축에 날짜 구성

SpreadJS에서는 범주 축을 날짜(시간 눈금) 축으로 구성하여 날짜를 설정할 수 있습니다. 다음과 같은 다양한 속성을 사용하여 일, 월 또는 연도 데이터를 범주 축에 표시할 수 있습니다.

BaseUnit: 일, 월 또는 연도와 같은 기본 단위 값을 나타냅니다.
MajorUnit: 두 주 눈금 사이의 간격 숫자 값을 나타냅니다.
MajorUnitScale: 범주 축의 주 단위 눈금 값(일, 월 또는 연도)을 나타냅니다.
MinorUnit: 두 보조 눈금 사이의 간격 숫자 값을 나타냅니다.
MinorUnitScale: 범주 축의 보조 단위 눈금 값(일, 월 또는 연도)을 나타냅니다.

기본 단위 간격의 차이는 차트 크기에 맞출 수 있는 단위 사이의 가장 작은 차이입니다. 그러나 MajorUnit 및 MinorUnit 속성을 사용하여 두 눈금 사이의 간격 숫자 값을 지정하면 이 차이를 사용자 지정할 수 있습니다.

다음 스크린샷은 여러 브라우저에서 월별 웹 페이지 평균 조회 시간을 보여주는 차트입니다. 범주 축은 월을 기본 단위로 사용하고 두 주 눈금 사이의 간격 숫자 값을 2로 설정한 날짜 축으로 구성되어 있습니다.

SpreadJS line chart uses a date category axis with months as the baseUnit and configured majorUnit intervals between labeled tick marks.

// Initializing Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// Get the activesheet
var activeSheet = spread.getActiveSheet();
// Create array
var dataArray = [
    ["", new Date(2019, 1, 1), new Date(2019, 2, 1), new Date(2019, 3, 1), new Date(2019, 4, 1), new Date(2019, 5, 1), new Date(2019, 6, 1)],
    ["Chrome", 5.782, 6.263, 7.766, 8.389, 9.830, 11.260],
    ["FireFox", 4.284, 4.130, 3.951, 3.760, 3.631, 3.504],
    ["IE", 2.814, 2.491, 2.455, 1.652, 1.073, 0.834],
];
// Set columns width
for (var i = 0; i < 8; i++) {
    activeSheet.setColumnWidth(i, 80.0, GC.Spread.Sheets.SheetArea.viewport);
}
// Set array
activeSheet.setArray(0, 0, dataArray);
// Set date formatter for a range
activeSheet.getRange(0, 0, 1, 7).formatter("m/d/yyyy");
// Add chart
var chart = activeSheet.charts.add('ChartWithDateAxis', GC.Spread.Sheets.Charts.ChartType.line, 2, 85, 400, 400, 'A1:G4');
// Set chart title
chart.title({ text: "Chart With Date Axis" });
// Set chart axes properties
var axes = chart.axes();

// Setting primaryCategory i.e. DateAxis properties
axes.primaryCategory.baseUnit = GC.Spread.Sheets.Charts.TimeUnit.months;
axes.primaryCategory.majorUnit = 1;
// axes.primaryCategory.minorUnit = 1;
axes.primaryCategory.majorUnitScale = GC.Spread.Sheets.Charts.TimeUnit.months;
// axes.primaryCategory.minorUnitScale = GC.Spread.Sheets.Charts.TimeUnit.days;
chart.axes(axes);

참고: 날짜 축에서는 시간, 분 및 초가 지원되지 않습니다.
minorUnitScale 값이 majorUnitScale보다 크면 minorUnitScale이 적용되지 않습니다.

교차 축 설정

Excel과 마찬가지로 가로 축 교차 값을 사용자 지정하여 차트의 모양을 변경할 수 있습니다. 차트의 교차 축은 데이터 요소가 양수와 음수 값에 걸쳐 있는 데이터를 나타낼 때 유용합니다. 이를 지원하기 위해 AxisCrossPoint 열거형에서는 다음 세 가지 옵션을 제공합니다.

automatic - 사용자가 축 교차점을 설정할 수 있습니다.
maximum - 축이 최댓값에서 교차하도록 설정할 수 있습니다.
minimum - 축이 최솟값에서 교차하도록 설정할 수 있습니다.

primaryCategory 및 primaryValue 클래스의 crossPoint 속성을 사용하여 교차 위치를 조정할 수 있습니다.

차트의 교차 축을 설정하는 방법을 살펴보겠습니다. 예를 들어 사용자가 2012년 전후로 성장률이 2%를 초과하거나 미달하는 경우의 이익 금액을 평가하려고 한다고 가정해 보겠습니다. 회사의 성장률과 이익을 나타내기 위해 거품형 차트를 사용하며, 각 거품은 특정 연도의 성장률과 이익을 나타냅니다. 거품 위에 마우스를 올렸을 때 표시되는 데이터 레이블에는 해당 연도의 성장률과 이익 금액이 표시됩니다.

성장률이 2%를 초과하거나 미달하는 경우의 이익 금액을 분석하기 위해 primaryCategory(Y축)의 crossPoint 값은 2012로 설정하고 primaryValue(X축)의 crossPoint 값은 2로 설정합니다. 이러한 crossPoint 위치를 사용하면 차트의 네 사분면에서 '성장률' 및 '이익 금액' 데이터를 쉽게 구분하고 파악할 수 있습니다. 차트의 왼쪽 위 및 아래 사분면을 사용하여 2012년 이전에 성장률이 2%를 초과하거나 미달한 연도의 이익 금액을 분석할 수 있습니다. 마찬가지로 오른쪽 위 및 아래 사분면을 사용하여 2012년 이후에 성장률이 2%를 초과하거나 미달한 연도의 이익 금액을 평가할 수 있습니다.

SpreadJS bubble chart crosses the category axis at 2012 and value axis at 2, separating growth and profit data into analytical quadrants.

다음 코드 샘플에서는 차트에 교차 축을 구성하는 방법을 보여줍니다.

document.addEventListener("DOMContentLoaded", function () {
    // initializing Spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // get the sheet
    var sheet = spread.getSheet(0);
    sheet.suspendPaint();
    // set column width
    sheet.setColumnWidth(0, 80);
    sheet.setColumnWidth(1, 90);
    sheet.setColumnWidth(2, 110);
    // create data array
    var dataArray = [
        ["Year", "Growth (%)", "Profit Amount ($)"],
        [2000, 4, 3123123],
        [2001, -2, 4123123],
        [2002, 1, 8456456],
        [2003, 3, 2345435],
        [2004, 7, 1768678],
        [2005, 5, 5453456],
        [2006, 5, 6676878],
        [2007, -4, 7434234],
        [2008, 3, 3834234],
        [2009, 2, 6756756],
        [2010, 5, 5672123],
        [2011, 9, 9743546],
        [2012, 6, 3464513],
        [2013, 4, 7431545],
        [2014, 7, 7456456],
        [2015, -1, 4567687],
        [2016, 6, 4870231],
        [2017, 3, 4353453],
        [2018, 7, 3459021],
        [2019, 8, 2390123],
        [2020, 5, 2302303],
    ];
    // set data array
    sheet.setArray(0, 0, dataArray);
    // add chart
    var chart = sheet.charts.add('BubbleChart1', GC.Spread.Sheets.Charts.ChartType.bubble, 320, 30, 620, 400, "A2:C22");
    // hide gridlines from the chart
    var gridLinesAxes = chart.axes();
    gridLinesAxes.primaryCategory.majorGridLine.visible = false;
    gridLinesAxes.primaryValue.majorGridLine.visible = false;
    chart.axes(gridLinesAxes);
    // get the series and set its backcolor with a pattern
    var series = chart.series().get();
    var seriesItem = series[0];
    seriesItem.backColor = {
        type: GC.Spread.Sheets.Charts.PatternType.dottedPercent40,
        foregroundColor: "blue",
        backgroundColor: "lime",
    }
    chart.series().set(0, seriesItem);
    // Configure ChartArea
    var chartArea = chart.chartArea();
    chartArea.backColor = "#FDF2E9";
    chartArea.fontSize = 16;
    // Set ChartArea's Border Style
    chartArea.border.width = 3;
    chartArea.border.color = "darkblue";
    chart.chartArea(chartArea);
    // set title for chart
    var title = chart.title();
    title.fontSize = "22.00";
    title.text = "Growth and Profit of Hindco Pvt. Ltd.";
    chart.title(title);
    // hide legend of the chart
    var legend = chart.legend();
    legend.visible = false;
    chart.legend(legend);
    // set crossPoint for x & y axis
    var axes = chart.axes();
    axes.primaryCategory.crossPoint = 2012; // y axis
    axes.primaryValue.crossPoint = 2; // x axis
    chart.axes(axes);
    // set the style for cells
    var style = new GC.Spread.Sheets.Style();
    style.font = "bold 12px Arial";
    style.foreColor = "white";
    style.backColor = "#5B9BD5";
    style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
    for (var i = 0; i < 3; i++)
        sheet.setStyle(0, i, style, GC.Spread.Sheets.SheetArea.viewport);
    sheet.resumePaint();
});

참고: 교차 축 기능은 현재 날짜 축에서 지원되지 않습니다.

축 방향 설정

차트 축의 방향을 제어하고 역순으로 표시하도록 설정할 수도 있습니다. 아래 이미지는 기본 값 축의 기본 방향과 역방향을 보여줍니다.

SpreadJS chart comparison shows default and reverse primary value-axis ordering controlled by the orientation scaling property.

orientation 속성은 기본 순서의 경우 0, 역순의 경우 1로 설정할 수 있습니다. 또는 AxisOrientation 열거형의 minMax(기본값) 또는 maxMin(역순) 값으로 설정할 수도 있습니다.

다음 코드 샘플에서는 차트 축의 기본 방향과 역방향을 설정하는 방법을 보여줍니다.

var axesMin = minMaxChart.axes();
axesMin.primaryValue.scaling = {
    orientation: GC.Spread.Sheets.Charts.AxisOrientation.minMax
    // or 
    //orientation: 0
};
minMaxChart.axes(axesMin);

var axesMax = maxMinChart.axes();
axesMax.primaryValue.scaling = {
    orientation: GC.Spread.Sheets.Charts.AxisOrientation.maxMin
    // or 
    //orientation: 1
};
maxMinChart.axes(axesMax);

제한 사항: 원형, 선버스트, 트리맵 및 깔때기형 차트에서는 축 방향을 설정할 수 없습니다.

축 레이블 위치 설정

tickLabelPosition 속성을 사용하여 차트에서 축 데이터 레이블의 위치를 설정할 수 있습니다. TickLabelPosition 열거형을 사용하여 데이터 레이블을 다음 위치에 배치할 수 있습니다.

High 또는 0: 차트의 위쪽 또는 오른쪽
Low 또는 1: 차트의 아래쪽 또는 왼쪽
Next to Axis 또는 2: 축 옆(축이 차트의 어느 한쪽 끝에 있지 않은 경우)(기본값)
None 또는 3: 눈금 레이블 없음

아래 이미지는 기본 범주 축의 데이터 레이블에 대한 기본 레이블 위치와 위쪽 레이블 위치를 보여줍니다.

SpreadJS chart compares default and high category-axis tick label positions configured with the tickLabelPosition property.

다음 코드 샘플에서는 차트의 기본 및 위쪽 축 데이터 레이블 위치를 설정합니다.

// set chart axes properties
var axesTickDefault = chart.axes();
// set tickLabelPosition to default nextToAxis
axesTickDefault.primaryCategory.tickLabelPosition = GC.Spread.Sheets.Charts.TickLabelPosition.nextToAxis;
// or
// axesTickDefault.primaryCategory.tickLabelPosition = 2;
chart.axes(axesTickDefault);

var axesTickHigh = chart.axes();
// set tickLabelPosition to High
axesTickHigh.primaryCategory.tickLabelPosition = GC.Spread.Sheets.Charts.TickLabelPosition.high;
// or
// axesTickDefault.primaryCategory.tickLabelPosition = 0;
chart.axes(axesTickHigh);

축 레이블 각도 설정

labelAngle 속성은 차트에서 축 데이터 레이블의 회전 각도를 제어합니다. 이 숫자 속성은 -90도에서 90도 범위의 값을 사용할 수 있으며 세부 사항은 다음과 같습니다.

기본값: undefined(회전 없음)
최댓값: 90(시계 방향으로 90도 회전)
최솟값: -90(시계 반대 방향으로 90도 회전)

아래 이미지는 기본 범주 축 데이터 레이블의 기본 각도와 45도 각도를 보여줍니다.

SpreadJS column chart compares default category labels with labels rotated 45 degrees using the axis labelAngle property.

다음 코드 샘플에서는 차트의 데이터 레이블 각도를 90도로 설정합니다.

var dataArray = [
    ['Manufacturer', 'Kia', 'Hyundai', 'Toyota', 'Nissan', 'Honda', 'Volkswagen', 'BMW', 'Mercedes', 'Audi', 'Renault'],
    ['Sales', 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
];

sheet.setArray(0, 0, dataArray);
var chart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 450, 100, 400, 400, "A1:K2");
var axesTemp = chart.axes();
axesTemp.primaryCategory.labelAngle = 90;
chart.axes(axesTemp);

디자이너에서 축 레이블 각도 설정

SpreadJS Designer provides an axis-label angle control for rotating category-axis data labels during chart formatting.

축 레이블 간격 설정

차트 축의 레이블 사이 간격 단위는 연속된 레이블 사이의 간격을 제어합니다. 이 기능을 사용하면 레이블 밀도를 조정하여 레이블이 지나치게 밀집되거나 겹치지 않도록 적절한 간격을 유지함으로써 데이터를 명확하게 표시할 수 있습니다.

Excel과 마찬가지로 간격 단위를 기본값 또는 사용자 지정 값으로 설정할 수 있습니다. GC.Spread.Sheets.Charts.IAxis 인터페이스의 tickLabelSpacing 속성을 사용하여 축 레이블의 사용자 지정 간격 단위를 만들 수 있습니다. tickLabelSpacing 속성의 기본값은 1이며, 차트의 모든 레이블을 표시합니다.

아래 이미지는 기본 범주 축의 기본 레이블과 간격이 설정된 레이블을 보여줍니다.

SpreadJS chart compares all single-level category labels with spaced labels after setting tickLabelSpacing to reduce axis label density.

다음 코드 샘플에서는 차트의 기본 범주 축 레이블 사이의 간격을 설정합니다.

// Set interval between axis labels.
var dataArray = [
['Manufacturer', 'Kia', 'Hyundai', 'Toyota', 'Nissan', 'Honda', 'Volkswagen', 'BMW', 'Mercedes', 'Audi', 'Renault'],
['Sales', 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
];

sheet.setArray(0, 0, dataArray);
var chart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 450, 100, 400, 400, "A1:K2");
let axesTemp = chart.axes();
axesTemp.primaryCategory.tickLabelSpacing = 2;
chart.axes(axesTemp);

또한 다단계 축 레이블이 있는 차트에서는 tickLabelSpacing 속성이 마지막 단계의 범주 필드에 바인딩된 리프 노드에 적용됩니다. 리프 노드는 트리 구조의 마지막 노드를 의미합니다.

상위 단계 축 레이블의 표시는 하위 레이블의 첫 번째 축 레이블 상태에 따라 결정됩니다.

첫 번째 축 레이블이 표시되면 상위 축 레이블도 표시됩니다.
첫 번째 축 레이블이 숨겨지면 상위 축 레이블도 숨겨집니다.

아래 이미지는 다단계 축 레이블의 기본 레이블과 간격이 설정된 레이블을 보여줍니다.

SpreadJS chart compares default and spaced multi-level category labels, showing how tickLabelSpacing affects leaf and parent axis labels.

다음 코드 샘플에서는 차트의 다단계 축 레이블 사이의 간격을 설정합니다.

// Set interval between multi level axis labels.
var dataArray = [
['Country', 'Korea', 'Japan', 'Germany', 'France'],
['Manufacturer', 'Kia', 'Hyundai', 'Toyota', 'Nissan', 'Honda', 'Volkswagen', 'BMW', 'Mercedes', 'Audi', 'Renault'],
['Sales', 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
];

sheet.setArray(0, 0, dataArray);
var chart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 150, 100, 400, 400, "B1:K3");
let axesTemp = chart.axes();
axesTemp.primaryCategory.tickLabelSpacing = 3;
chart.axes(axesTemp);

제한 사항

날짜 또는 숫자 축을 포함하는 차트에서는 tickLabelSpacing 속성 설정이 지원되지 않습니다.
tickLabelSpacing 속성은 선버스트, 트리맵, 폭포, 깔때기형, 방사형 차트에서 지원되지 않습니다.

축