통합 문서에서 SpreadJS 차트의 가로 축과 세로 축을 여러 스타일 속성으로 사용자 정의할 수 있습니다. Javascript 코드를 사용하여 색, 선 스타일, 눈금 및 눈금 레이블 위치, 서식, 제목 글꼴 크기 같은 속성을 사용자 정의할 수 있습니다. 특히 대시보드나 보고서로 구현하는 경우 전체 스프레드시트에서 스타일을 일치시키는 것이 특별히 중요하므로, 다른 차트 요소 외에도 축을 사용자 정의할 수 있는 기능은 유용합니다.

기본 범주 축, 기본 값 축, 보조 범주 축 및 보조 값 축 등 네 가지 유형의 축이 있습니다. 다음 코드를 사용하여 스타일, 선 스타일, 눈금 위치, 눈금 레이블 위치, 형식, 제목 및 눈금선을 가져오거나 설정할 수 있습니다. 눈금선의 색, 너비 및 표시 여부를 가져오거나 설정할 수 있습니다. 로그 축: SpreadJS는 값 축의 로그 눈금을 지원합니다. 축 레이블 위치: SpreadJS는 아래 열거형 형식 GC.Spread.Sheets.Charts.TickLabelPosition처럼 축에 대해 설정된 레이블 위치를 지원합니다. high low nextToAxis none 축 방향: SpreadJS에서는 축에 대해 설정된 방향을 지원합니다. 표시 단위: 표시 단위 속성을 사용하여 백만/조 등의 단위를 실제 큰 수 대신 값 축 표시로 표시할 수 있습니다. 이 기능은 공간을 절약하는 데 유용하며 이를 통해 쉽게 읽을 수 있습니다. 날짜 축: SpreadJS는 아래 속성으로 날짜 축을 지원합니다. 날짜 단위 및 날짜 단위 척도를 조정할 수 있습니다. baseUnit majorUnit majorUnitScale minorUnit minorUnitScale 교차: SpreadJS에서는 숫자 유형으로 설정된 축 교차 또는 아래 축 교차 열거형 형식 GC.Spread.Sheets.Charts.AxisCrossPoint를 지원합니다. automatic maximum minimum
var spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); var sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.setValue(0, 1, "Apple"); sheet.setValue(0, 2, "Banana"); sheet.setValue(0, 3, "Pear"); sheet.setValue(1, 0, "People1"); sheet.setValue(2, 0, "People2"); sheet.setValue(3, 0, "People3"); for (var r = 1; r <= 3; r++) { for (var c = 1; c <= 3; c++) { sheet.setValue(r, c, parseInt(Math.random() * 100)); } } var dataArray = [ ["Month", 'Fund Income', 'Stock Income', 'Bank Interest Income'], [1, 100, 2, 9], [2, -96, 15, 2], [3, 53, 88, 8], [4, -15, 150, 1], [5, 77, -52, 3], [6, 20, 66, 6], ]; sheet.setArray(0, 6, dataArray); sheet.getRange(1, 7, 6, 3).formatter("$#,##0.00"); //add chart var Charts = GC.Spread.Sheets.Charts; var columnChart = sheet.charts.add('columnChart', Charts.ChartType.columnClustered, 10, 100, 400, 350); var xyScatterChart = sheet.charts.add('xyScatterChart', GC.Spread.Sheets.Charts.ChartType.xyScatterSmooth, 420, 100, 400, 350, 'G1:J7'); var orientationChart = sheet.charts.add('orientationChart', Charts.ChartType.columnClustered, 830, 100, 400, 350,'A1:D4'); var series = columnChart.series(); series.add({ chartType: Charts.ChartType.columnClustered, axisGroup: Charts.AxisGroup.primary, name: "Sheet1!$A$2", xValues: "Sheet1!$B$1:$D$1", yValues: "Sheet1!$B$2:$D$2" }); series.add({ chartType: Charts.ChartType.columnClustered, axisGroup: Charts.AxisGroup.primary, name: "Sheet1!$A$3", xValues: "Sheet1!$B$1:$D$1", yValues: "Sheet1!$B$3:$D$3" }); series.add({ chartType: Charts.ChartType.lineMarkers, axisGroup: Charts.AxisGroup.secondary, name: "Sheet1!$A$4", xValues: "Sheet1!$B$1:$D$1", yValues: "Sheet1!$B$4:$D$4" }); var axes = columnChart.axes(); axes.primaryCategory.style.color = 'orange'; axes.primaryCategory.title.color = 'orange'; axes.primaryCategory.title.text = 'Primary Category Axis'; axes.primaryValue.style.color = 'red'; axes.primaryValue.title.color = 'red'; axes.primaryValue.title.text = 'Primary Value Logarithmic Axis'; axes.primaryValue.title.fontSize = 16; axes.primaryValue.scaling = { logBase: 2 }; axes.secondaryCategory.visible = true; axes.secondaryCategory.style.color = 'green'; axes.secondaryCategory.title.color = 'green'; axes.secondaryCategory.title.text = 'Secondary Category Axis'; axes.secondaryCategory.title.fontSize = 16; axes.secondaryValue.style.color = 'blue'; axes.secondaryValue.title.color = 'blue'; axes.secondaryValue.format = 'General'; axes.secondaryValue.title.text = 'Secondary Value Axis'; var columnChartTitle = columnChart.title(); columnChartTitle.text = "Product Sales"; columnChart.title(columnChartTitle); columnChart.axes(axes); var axes1 = xyScatterChart.axes(); var xyScatterChartTitle = xyScatterChart.title(); xyScatterChartTitle.text = "First Half Financial Income"; xyScatterChart.title(xyScatterChartTitle); axes1.primaryCategory.crossPoint = 3; xyScatterChart.axes(axes1); var axes2 = orientationChart.axes(); var orientationChartTitle = orientationChart.title(); orientationChartTitle.text = "Product Sales(reverse order)"; orientationChart.title(orientationChartTitle); axes2.primaryValue.scaling = { orientation: GC.Spread.Sheets.Charts.AxisOrientation.maxMin }; orientationChart.axes(axes2); sheet.resumePaint(); };
<!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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/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 class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100% ; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }