[]
        
(Showing Draft Content)

메서드를 사용한 열, 꺾은선, 승패 스파크라인

SpreadJS에서는 setSparkline 메서드를 사용하여 , 꺾은선, 승패 스파크라인을 생성할 수 있습니다. 이 메서드는 셀 위치, 스파크라인 유형, 스파크라인 설정, 데이터 범위 유형과 같은 다양한 매개변수를 받습니다.


연속 및 비연속 셀 범위라는 두 가지 유형의 데이터 범위를 사용하여 열, 꺾은선, 승패 스파크라인을 생성할 수 있습니다.

연속 범위를 사용하는 스파크라인

setSparkline 메서드는 dataRange 매개변수를 받아 데이터 범위를 지정할 수 있습니다. 예를 들어, A1:B10, D12:E20 등입니다.


아래 이미지는 자동차 부품 회사의 2주간 단위 판매량을 보여줍니다. 이 데이터는 열, 꺾은선, 승패 스파크라인을 통해 시각적으로 지원됩니다.

Ask ChatGPT


spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var activeSheet = spread.getActiveSheet();

// 데이터 설정
activeSheet.addSpan(0, 0, 1, 5);
activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("Fortnightly sales analysis").font("20px Arial").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
var table1 = activeSheet.tables.add("table1", 1, 0, 16, 5, GC.Spread.Sheets.Tables.TableThemes.medium3);
table1.filterButtonVisible(false);
activeSheet.setValue(1, 0, "Dates");
activeSheet.setValue(1, 1, "Sales($)");
activeSheet.setValue(1, 2, "Diagram 1");
activeSheet.setValue(1, 3, "Diagram 2");
activeSheet.setValue(1, 4, "Diagram 3");
activeSheet.getRange("A2:E2").hAlign(GC.Spread.Sheets.HorizontalAlign.center);

// 날짜 설정
var now = new Date();
var daysOfYear = [];
for (var d = new Date(2021, 0, -1); d <= now; d.setDate(d.getDate() + 1)) {
    daysOfYear.push(new Date(d));
}
for (var i = 2; i < 17; i++) {
    activeSheet.setValue(i, 0, daysOfYear[i]);
}

// 값 설정 
activeSheet.getRange(-1, 0, -1, 1).formatter("dddd dd/mm/yyyy");
activeSheet.setValue(2, 1, 102800);
activeSheet.setValue(3, 1, 920234);
activeSheet.setValue(4, 1, 450235);
activeSheet.setValue(5, 1, 100786);
activeSheet.setValue(6, 1, 30594);
activeSheet.setValue(7, 1, 104355);
activeSheet.setValue(8, 1, 255476);
activeSheet.setValue(9, 1, 60345);
activeSheet.setValue(10, 1, 503453);
activeSheet.setValue(11, 1, 906843);
activeSheet.setValue(12, 1, 800399);
activeSheet.setValue(13, 1, 880824);
activeSheet.setValue(14, 1, 403895);
activeSheet.setValue(15, 1, 345802);
activeSheet.setValue(16, 1, 619000);

var data = new GC.Spread.Sheets.Range(2, 1, 15, 1);

// 스파크라인 설정 추가
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.lineWeight = 3;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
setting.options.seriesColor = "Text 2 1";
setting.options.firstMarkerColor = "Text 2 3";
setting.options.negativeColor = "Accent 2 1";
setting.options.markersColor = "Accent 3 1";
setting.options.lowMarkerColor = "Accent 4 1";
setting.options.highMarkerColor = "Accent 6 1";
setting.options.lastMarkerColor = "Accent 6 6";
setting.options.axisColor = "Text 1 1";

// LINESPARKLINE
activeSheet.setSparkline(2, 2, data
    , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
    , GC.Spread.Sheets.Sparklines.SparklineType.line
    , setting
    , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
);
// COLUMNSPARKLINE
activeSheet.setSparkline(2, 3, data
    , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
    , GC.Spread.Sheets.Sparklines.SparklineType.column
    , setting
    , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
);
// WINLOSSSPARKLINE
activeSheet.setSparkline(2, 4, data
    , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
    , GC.Spread.Sheets.Sparklines.SparklineType.winloss
    , setting
    , GC.Spread.Sheets.Sparklines.DataOrientation.vertical
);

비연속 범위를 사용하는 스파크라인

워크시트에서 임의의 값을 새로 정의한 사용자 지정 이름에 추가하여 비연속 데이터 범위를 제공하고, 이를 사용하여 스파크라인을 생성할 수 있습니다. 이 사용자 지정 이름은 setSparklinedataRange 매개변수에 전달할 수 있습니다.


예를 들어, B4, B5, B11, B12와 같은 데이터 셀을 사용자 지정 이름 "range"에 추가하여 비연속 범위를 생성할 수 있습니다.

// 비연속 범위 생성
spread.addCustomName("range", "=Sheet1!$B$4,Sheet1!$B$5,Sheet1!$B$11,Sheet1!$B$12", 0, 0, "non-continuous range");

아래 이미지는 자동차 부품 회사의 단위 판매량을 보여주며, 2주간의 기간 중 주말(토요일과 일요일) 과 같은 특정 셀 값을 선택하여 시각적으로 지원하는 스파크라인을 생성한 예시입니다.

Ask ChatGPT