영역형 차트

워크시트의 열 또는 행에 정렬된 데이터는 영역 차트에 플롯될 수 있습니다. 영역 차트는 시간에 따른 변화를 그리는 데 사용될 수 있으며 그려진 값의 합계를 표시함으로써 추세에 걸쳐 전체 값에 주의를 환기시킵니다.

SpreadJS는 영역형, 누적 영역형 및 100% 기준 누적 영역형 차트를 지원합니다. GC.Spread.Sheets.Charts.ChartType.area 속성을 사용하여 차트 유형을 가져옵니다. Spread에 영역형 차트를 추가하고 차트 API를 사용하여 스타일을 변경할 수 있습니다. 영역형: 영역형 차트는 시간 경과에 따른 추세를 보여줍니다. 누적 영역형: 누적 영역형 차트는 시간 또는 다른 범주형 데이터에 따른 각 값의 기여 추세를 보여줍니다. 100% 기준 누적 영역형: 100% 기준 누적 영역형 차트는 각 값이 시간 또는 다른 범주형 데이터에 따라 기여하는 비율의 추세를 보여줍니다.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 3}); initSpread(spread); }; function initSpread(spread) { var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.area, desc: "area", }, { type: GC.Spread.Sheets.Charts.ChartType.areaStacked, desc: "areaStacked", }, { type: GC.Spread.Sheets.Charts.ChartType.areaStacked100, desc: "areaStacked100", }]; var sheets = spread.sheets; spread.suspendPaint(); initArea(sheets[0], chartType[0].desc, chartType[0].type); initArea(sheets[1], chartType[1].desc, chartType[1].type); initArea(sheets[2], chartType[2].desc, chartType[2].type); spread.resumePaint(); } function initArea(sheet, sheetName, chartType) { sheet.name(sheetName); sheet.suspendPaint(); //prepare data for chart var dataArray = [ ["", "1750", "1800", "1850", "1900", "1950", "2000", "2050"], ["Asia", 502, 635, 809, 947, 1402, 3634, 5268], ["Africa", 106, 107, 111, 133, 221, 767, 1766], ["America", 18, 31, 54, 156, 339, 818, 1201], ["Europe", 163, 203, 276, 408, 547, 729, 628], ["Oceania", 2, 2, 2, 6, 13, 30, 46] ]; sheet.setArray(0, 0, dataArray); sheet.resumePaint(); var chart = sheet.charts.add((sheet.name() + 'Chart1'), chartType, 0, 120, 800, 300, "A1:H6", GC.Spread.Sheets.Charts.RowCol.rows); var series = chart.series().get(); var colorArray = ['rgba(158, 200, 242, 0.7)', 'rgba(245, 87, 31, 0.7)', 'rgba(173, 255, 131, 0.7)', 'rgba(255, 178, 50, 0.7)', 'rgba(93, 93, 93, 0.7)']; var colorLineArray = ['rgba(158, 200, 242)', 'rgba(245, 87, 31)', 'rgba(173, 255, 131)', 'rgba(255, 178, 50)', 'rgba(93, 93, 93)']; for (var i = 0; i < series.length; i++) { series[i].backColor = colorArray[i]; series[i].border.color = colorLineArray[i]; series[i].border.width = 2; chart.series().set(i, series[i]); } var axes = chart.axes(); axes.primaryValue.lineStyle.color = 'grey'; axes.primaryValue.majorTickPosition = GC.Spread.Sheets.Charts.TickMark.outside; axes.primaryValue.majorUnit = 1000; chart.axes(axes); chart.title({text:"The Continents History and Forecast of Population Growth",fontSize:18}); chart.axes({primaryValue:{title:{text:"Units: one million"}}}); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-tutorial"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }