[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

계열

SpreadJS에서는 차트를 생성할 때 하나 이상의 데이터 계열을 플로팅할 수 있습니다. 각 시리즈는 범례의 항목을 나타냅니다. series 메서드와 SeriesCollection 클래스를 사용하여 차트의 계열 컬렉션에서 계열 항목을 가져오거나, 삽입하거나, 제거할 수 있으며, 각 시리즈 항목에 대해 시리즈 이름, 테두리 두께, 테두리 색상, y값, x값, 채우기 색상 등을 사용자 지정할 수 있습니다.

이와 함께, 데이터 계열의 선(line) 유형도 사용자 지정할 수 있습니다. 이를 위해 LineDashStyle 열거형을 사용할 수 있으며, 계열의 선 유형을 solid, squareDot, longDash, dash, sysDashDot, dashDotDot 등으로 설정할 수 있습니다. SpreadJS 디자이너의 차트 사이드 패널에도 'Dash type' 드롭다운 필드가 제공되어, 차트 계열의 선 유형을 선택할 수 있는 다양한 옵션을 제공합니다.


계열 구성이 적용된 기본 이미지는 아래와 같습니다.



서로 다른 계열 선 유형이 적용된 기본 이미지는 아래와 같습니다.




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

//시리즈 구성
var series = chart.series();
var seriesItem = series.get(0);
seriesItem.yValues = "Sheet1!$B$5:$E$5";
seriesItem.backColor = "#d3d3d3";
seriesItem.border.width = 2;
series.set(0, seriesItem);

다음 코드 샘플은 차트에서 계열의 선 유형을 사용자 지정하는 방법을 보여줍니다.

Ask ChatGPT

// 차트 0번째 계열에 lineType 설정
var series1 = chart.series().get(0);
series1.border.lineType = GC.Spread.Sheets.Charts.LineDashStyle.dashDotDot;
chart.series().set(0, series1);

// 차트 1번째 계열에 lineType 설정
var series2 = chart.series().get(1);
series2.border.lineType = GC.Spread.Sheets.Charts.LineDashStyle.longDash;
chart.series().set(1, series2);

//차트 2번째 계열에 lineType 설정
var series3 = chart.series().get(2);
series3.border.lineType = GC.Spread.Sheets.Charts.LineDashStyle.sysDashDot;
chart.series().set(2, series3);