JavaScript 스프레드시트 보고서(Dashboard)를 만드는 방법
추천0
페이지 정보
작성자 GrapeCity
작성일 2018-05-29 00:00 조회 1,719회
댓글 0건
본문
관련링크
스프레드시트는 많은 비즈니스 응용 프로그램 및 환경에서 다양하게 활용이 가능한 빈 캔버스입니다. 이것이 SpreadJS JavaScript 및 데이터 프리젠테이션 컴포넌트가 비즈니스에 특히 유용한 이유입니다. 데이터 저장에서 데이터 관리 및 처리에 이르기까지 스프레드시트는 데이터를 시각적으로 제시하면서 데이터 세트에 대해 수학, 통계, 재무 및 조직 변환을 수행할 수 있습니다. 이번 포스팅에서는 SpreadJS를 사용하여 JavaScript 보고서 템플릿를 작성하는 방법을 보여줍니다. 차트와 스파크 라인을 생성하기 위해 데이터를 템플릿에 바인딩하는 단계별 프로세스를 보여줍니다.
SpreadJS 페이지 설정
먼저 Spread.Sheets 라이브러리 참조를 페이지에 추가하십시오.
<script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.11.0.0.min.js"></script> <link rel="stylesheet" type="text/css" href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.11.0.0.css">
스크립트를 작성할 때 스크립트가 올바르게 실행되고 있는지 확인하기 위해 Spread 인스턴스를 포함하도록 DIV 요소를 정의할 수 있습니다.
이 스프레드 시트의 이름을 다음과 같이 지정합니다 .
<div id="spreadSheet" style="width: 100%; height: 900px; border: 1px solid gray"></div>
보고서 템플릿 및 스프레드 시트 데이터 로드
이 튜토리얼에서는 템플릿이 위에 표시된대로 Spread.Sheets Designer를 사용하여 작성되었습니다. 두 장이 작성되었습니다. (첨부파일을 확인해주세요)
Dashboard : 보고서 대시 보드를 포함 할 시트입니다.
DataSheet : 대시 보드에 사용 된 데이터를 포함하는 시트입니다.
대시보드 시트에서, 차트를 포함 할 영역에 대한 아웃라인를 만들었습니다.
해당 차트중에 하나의 차트를 위한 데이터를 가지고 있는 테이블을 만들었습니다. 데이터 시트에는, 테이블 위한 아웃라인을 작성했습니다 (데이터의 로드를 위해).
이 템플릿은 Spread.Sheets의 JSON 파일 형식인 SSJSON으로 저장된 다음 페이지에서 참조 할 수 있도록 JS로 내보냈습니다.
<script src="./ReportTemplate.js"></script>
또한 페이지에 참조 데이터를 로드해야합니다. 이것은 JS 파일에 저장됩니다.
<script src="./data.js"></script>
스프레드 시트 구성 요소의 설정 스크립트
데이터와 템플릿을 참조하여 Spread.Sheets 구성 요소에 로드합니다. Spread 인스턴스를 초기화하고 데이터를 바인딩하기 위해, 창이 로드될 때, 이를 위한 함수를 만들 수 있습니다.
var spread, activeSheet, dataSheet, source;
window.onload = function () {
// Initialize variables and load template
spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), { sheetCount: 2 });
spread.fromJSON(ReportTemplate);
activeSheet = spread.getActiveSheet();
activeSheet.options.rowHeaderVisible = false;
activeSheet.options.colHeaderVisible = false;
dataSheet = spread.getSheet(1);
// Turn painting off while adding the data to the sheets
spread.suspendPaint();
source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
activeSheet.setDataSource(source);
dataSheet.setDataSource(source);
// Change the color of the gray area behind the sheets in Spread
spread.options.grayAreaBackColor = "lightgray";
spread.resumePaint();
}시트에 데이터 로드
로드할 데이터의 첫 번째 부분은 대시보드 시트의 수익 차트를 참조합니다. 데이터 파일에서, 이 특정 데이터는 월, 수익 및 unitsSold 필드 와 함께 sales_chart 섹션에 있습니다. 먼저 테이블 열을 정의한 다음, 테이블을 데이터 파일의 해당 특정 섹션에 바인딩합니다.
function LoadRevenueTable() {
var tableColumns = [],
names = ['month', 'revenue', 'unitsSold'],
labels = ['Month', 'Revenue ($)', 'Units Sold'];
names.forEach(function (name, index) {
var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
tableColumn.name(labels[index]);
tableColumn.dataField(name);
tableColumns.push(tableColumn);
});
// Find the table in the sheet and add the data to it
var table = activeSheet.tables.findByName("RevenueTable");
table.autoGenerateColumns(false);
table.bindColumns(tableColumns);
table.bindingPath('revenue_chart');
activeSheet.getRange(4, 14, 12, 1).formatter("$###,0");
}차트와 스파크 라인에 필요한 데이터로 데이터 시트를 채웁니다. 위의 수익 테이블 코드와 마찬가지로 데이터 시트의 각 테이블에 대한 열 이름과 데이터 바인딩 경로를 설정할 수 있습니다.
// Fill in the second sheet with the data from the data source
function FillDataSheet() {
// Add dates to metrics table
for (var m = 2; m <= 13; m++) {
dataSheet.setValue(m, 0, new Date(2018, m-1, 28));
dataSheet.getCell(m, 0).formatter("MM/dd/yy")
}
// Create columns for metric table
var metricsTableColumns = [],
names = ['revenue', 'profit', 'expenses', 'order_size', 'customers', 'market_share'],
labels = ['Revenue', 'Profit', 'Expenses', 'Average Order Size', 'New Customers', 'Market Share'];
names.forEach(function (name, index) {
var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
tableColumn.name(labels[index]);
tableColumn.dataField(name);
metricsTableColumns.push(tableColumn);
});
// Add Key Metrics Table
var metricsTable = dataSheet.tables.add("KeyMetricsTable", 1, 1, 13, 6, GC.Spread.Sheets.Tables.TableThemes.medium1);
metricsTable.autoGenerateColumns(false);
metricsTable.bindColumns(metricsTableColumns);
metricsTable.bindingPath('key_metrics_by_month.values');
// Create columns for the top 5 tables
var top5TableColumns = [],
names = ['name', 'revenue'],
labels = ['Name', 'Revenue'];
names.forEach(function (name, index) {
var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
tableColumn.name(labels[index]);
tableColumn.dataField(name);
top5TableColumns.push(tableColumn);
});
// Add Top 5 Sales People Table
var top5SalesTable = dataSheet.tables.add("Top5SalesTable", 1, 8, 6, 2, GC.Spread.Sheets.Tables.TableThemes.medium1);
top5SalesTable.autoGenerateColumns(false);
top5SalesTable.bindColumns(top5TableColumns);
top5SalesTable.bindingPath('five_best.sales_men');
top5SalesTable.rowFilter().sortColumn(top5SalesTable.range().col + 1, true);
// Add Top 5 Regions Table
var top5RegionsTable = dataSheet.tables.add("Top5RegionsTable", 1, 11, 6, 2, GC.Spread.Sheets.Tables.TableThemes.medium1);
top5RegionsTable.autoGenerateColumns(false);
top5RegionsTable.bindColumns(top5TableColumns);
top5RegionsTable.bindingPath('five_best.regions');
top5RegionsTable.rowFilter().sortColumn(top5RegionsTable.range().col + 1, true);
// Add Top 5 Products Table
var top5ProductsTable = dataSheet.tables.add("Top5ProductsTable", 1, 14, 6, 2, GC.Spread.Sheets.Tables.TableThemes.medium1);
top5ProductsTable.autoGenerateColumns(false);
top5ProductsTable.bindColumns(top5TableColumns);
top5ProductsTable.bindingPath('five_best.products');
top5ProductsTable.rowFilter().sortColumn(top5ProductsTable.range().col + 1, true);
}동일한 함수에서, 각 주요 측정 항목(Key Metric)에 대한 데이터 소스의 목표 값을 테이블 중 하나로 설정하려고 합니다. 이를 위해 데이터 계층의 각 수준을 드릴 다운하고 데이터를 다음과 같이 설정할 수 있습니다.
// Add Target Values for each metric dataSheet.setBindingPath(14, 1, "key_metrics.revenue.target"); dataSheet.setBindingPath(14, 2, "key_metrics.profit.target"); dataSheet.setBindingPath(14, 3, "key_metrics.expenses.target"); dataSheet.setBindingPath(14, 4, "key_metrics.order_size.target"); dataSheet.setBindingPath(14, 5, "key_metrics.customers.target"); dataSheet.setBindingPath(14, 6, "key_metrics.market_share.target");
차트 만들기
데이터가 Spread 인스턴스에 로드되었으므로, 해당 데이터를 기반으로 차트를 만들 수 있습니다.
수익 차트부터는 페이지에서 사각형 요소를 가져오기 위해 Spread.Sheets의 코드를 사용합니다. 이것은 왼쪽 위와 오른쪽 아래 모서리 (차트가 위치할)의 셀을 나타내므로, 정의된 범위 내에 맞도록 차트의 위치와 크기를 계산할 수 있습니다.
function CreateRevenueChart() {
// Create Revenue Column Chart
var startCellRect = activeSheet.getCellRect(2, 2);
var endCellRect = activeSheet.getCellRect(17, 11);
}시트에 다른 유형의 차트가 있으므로, 실제 차트 작성을 분리하고 기능을 제공하는 것이 가장 좋습니다.
이 기능을 위해 다음 매개 변수를 전달할 수 있습니다.
sheet: 차트가있는 시트
chartName : 차트 이름
chartType :이 함수에서 사용할 코드 경로를 결정하는 차트 유형
startCellRect : 시작 셀의 사각형 요소
endCellRect : 엔드 셀의 사각형 요소
xValues : 차트의 x 축 값을 포함하는 셀 범위
yValues : 차트의 y 축 값을 포함하는 셀 범위
seriesBackColor : 특정 계열의 색상 (수익 차트의 경우 Spread에서 기본 색상을 사용하도록 함)
이 CreateRevenueChart 함수에서, 아래의 함수를 호출하합니다. 해당 함수는 아래에서 추가할 것입니다.
BaseCreateChart(activeSheet, 'Revenue', GC.Spread.Sheets.Charts.ChartType.columnClustered, startCellRect, endCellRect, 'Dashboard!N5:N16', 'Dashboard!O5:O16', null);
이제, 위에서 호출한 기본 차트 생성 함수를 작성합니다.
function BaseCreateChart(sheet, chartName, chartType, startCellRect, endCellRect, xValues, yValues, seriesBackColor) {
// Calculate the position and size of the chart
var leftBorderOffset = 3, topBorderOffset = 2;
var chart;
var xPosition, yPosition, height, width;
if (sheet.options.rowHeaderVisible && sheet.options.colHeaderVisible) {
xPosition = startCellRect.x - sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader);
yPosition = startCellRect.y - sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader);
} else {
xPosition = startCellRect.x;
yPosition = startCellRect.y;
}
width = endCellRect.x - startCellRect.x - leftBorderOffset;
height = endCellRect.y - startCellRect.y - topBorderOffset;
}위치와 크기를 알면, 차트를 시트에 추가할 수 있습니다.
// Check if the chart is a clustered column chart
if (chartType == GC.Spread.Sheets.Charts.ChartType.columnClustered) {
chart = sheet.charts.add(chartName,
chartType,
xPosition,
yPosition,
width,
height,
GC.Spread.Sheets.Charts.RowCol.rows);
}동일한 IF 블록에서 세로 막대형 차트의 기본 계열을 추가하십시오. 이 차트는 콤보 차트가 될 것이므로, 여러 축이 있습니다. 하나는 컬럼과 선, 다른 축은 서로 다른 측정 단위를 사용합니다.
이를 분리하기 위해, 축의 axisGroup 속성을 개별적으로 지정할 수 있습니다.
// Add the main series to the column chart
chart.series().add({
chartType: GC.Spread.Sheets.Charts.ChartType.columnClustered,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
name: "Dashboard!$O$4",
xValues: xValues,
yValues: yValues
});
// Add a line series to the column chart
chart.series().add({
chartType: GC.Spread.Sheets.Charts.ChartType.lineMarkers,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.secondary,
name: "Dashboard!$P$4",
xValues: xValues,
yValues: "Dashboard!$P$5:$P$16"
});또한, 사용자가 단위의 차이를 알 수 있도록, 축을 형식화 할 수 있습니다.
// Change the format of the axes var axes = chart.axes(); axes.primaryValue.format = "$###,0"; axes.secondaryValue.format = "General"; chart.axes(axes);
해당 BaseCreateChart 함수의 끝 에서 차트 제목을 설정할 수 있습니다.
// Set the title of the chart
if (chart != null) {
var title = chart.title();
title.text = chartName;
chart.title(title);
}
이제 막대 차트 작업을 시작합니다. BaseCreateChart 함수를 호출하는 비슷한 함수를 작성합니다.
// Create Bar Charts
function CreateBarCharts() {
// Create Top 5 Sales People Chart
var startCellRect = activeSheet.getCellRect(18, 2);
var endCellRect = activeSheet.getCellRect(33, 8);
BaseCreateChart(activeSheet, 'Top 5 Sales People', GC.Spread.Sheets.Charts.ChartType.barClustered, startCellRect, endCellRect, 'DataSheet!I3:I7', 'DataSheet!J3:J7', null);
// Create Top 5 Regions Chart
startCellRect = activeSheet.getCellRect(18, 8);
endCellRect = activeSheet.getCellRect(33, 13);
BaseCreateChart(activeSheet, 'Top 5 Regions', GC.Spread.Sheets.Charts.ChartType.barClustered, startCellRect, endCellRect, 'DataSheet!L3:L7', 'DataSheet!M3:M7', 'DarkOrange');
// Create Top 5 Products Chart
startCellRect = activeSheet.getCellRect(18, 13);
endCellRect = activeSheet.getCellRect(33, 17);
BaseCreateChart(activeSheet, 'Top 5 Products', GC.Spread.Sheets.Charts.ChartType.barClustered, startCellRect, endCellRect, 'DataSheet!O3:O7', 'DataSheet!P3:P7', 'Green');
}BaseCreateChart 함수로 돌아가서, 막대 차트를 위해 특별히 다른 IF 블록을 만들 수 있습니다.
세로 막대형 차트와 마찬가지로 차트와 계열을 추가합니다. 하지만 이를 위해, 범례를 끄고 글꼴 크기를 줄입니다.
또한 함수를 호출 할 때, 각 차트의 색상을 설정하십시오.
// ...
} else if (chartType == GC.Spread.Sheets.Charts.ChartType.barClustered) {
// Check if the chart is a clustered bar chart
chart = sheet.charts.add(chartName,
chartType,
xPosition,
yPosition,
width,
height,
GC.Spread.Sheets.Charts.RowCol.rows
);
// Add the main series to the bar chart
chart.series().add({
chartType: GC.Spread.Sheets.Charts.ChartType.barClustered,
axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary,
xValues: xValues,
yValues: yValues,
backColor: seriesBackColor
});
// Turn the legend off for the bar charts
var legend = chart.legend();
legend.visible = false;
chart.legend(legend);
// Make the font size smaller for the bar charts
var chartArea = chart.chartArea();
chartArea.fontSize = 10;
chart.chartArea(chartArea);
}
주요 측정 항목 스파크 라인 섹션 만들기
데이터 시트의 대상 데이터와 마찬가지로, 셀 수준 데이터 바인딩을 사용하여, 주요 측정 항목(key metric) 데이터의 이름과 값을 대시 보드의 특정 셀에 바인딩합니다
function CreateKeyMetricsSection() {
// Add Metric Names to Key Metrics Section
activeSheet.setBindingPath(36, 8, "key_metrics.revenue.name");
activeSheet.setBindingPath(37, 8, "key_metrics.profit.name");
activeSheet.setBindingPath(38, 8, "key_metrics.expenses.name");
activeSheet.setBindingPath(39, 8, "key_metrics.order_size.name");
activeSheet.setBindingPath(40, 8, "key_metrics.customers.name");
activeSheet.setBindingPath(41, 8, "key_metrics.market_share.name");
// Add Current Values to Key Metrics Section
activeSheet.setBindingPath(36, 15, "key_metrics.revenue.value");
activeSheet.setBindingPath(37, 15, "key_metrics.profit.value");
activeSheet.setBindingPath(38, 15, "key_metrics.expenses.value");
activeSheet.setBindingPath(39, 15, "key_metrics.order_size.value");
activeSheet.setBindingPath(40, 15, "key_metrics.customers.value");
activeSheet.setBindingPath(41, 15, "key_metrics.market_share.value");
// Add Sparklines to Key Metrics Section
CreateLineSparklines();
}이제, 스파크라인으로 표시할, 주요 측정 항목(key Metric) 섹션의 왼쪽부터 시작하는 데이터를 사용하여 스파크 라인을 만들 수 있습니다. 이 라인 스파크 라인은 데이터 컬럼과 데이터 시트의 월별 주요 지표(Key Metrics by Month) 테이블에 있는 특정 주요 지표 컬럼을 사용합니다.
댓글목록
등록된 댓글이 없습니다.
