SpreadJS에서는 깔때기형 차트를 지원합니다. GC.Spread.Sheets.Charts.ChartType.funnel 속성을 사용하여 차트 유형을 가져옵니다. 깔때기형 차트는 프로세스의 여러 단계에 걸쳐 값을 보여줍니다.
Spread에 깔때기형 차트를 추가하고 차트 API를 사용하여 스타일을 변경할 수 있습니다.
window.onload = function () {
GC.Spread.Common.CultureManager.culture("ko-kr");
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});
initSpread(spread);
};
function initSpread(spread) {
var sheets = spread.sheets;
spread.suspendPaint();
// custom sheet style
setSheet(sheets);
setData(sheets[0], 'funnelChart');
initFunnel(sheets[0], GC.Spread.Sheets.Charts.ChartType.funnel);
setData(sheets[1], 'customStyle');
var customFunnelChart = initFunnel(sheets[1], GC.Spread.Sheets.Charts.ChartType.funnel);
setCustomStyle(customFunnelChart);
spread.resumePaint();
}
function setSheet(sheets) {
var columnWidths = [20, 100, 100];
for (var i = 0; i < sheets.length; i++) {
sheets[i].options.gridline.showHorizontalGridline = false;
sheets[i].options.gridline.showVerticalGridline = false;
sheets[i].getRange(1, 1, 6, 2)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center)
.setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {
all: true
});
sheets[i].getRange(1, 1, 1, 2).font('bold normal 10pt Arial');
for (var j = 0; j < columnWidths.length; j++) {
sheets[i].setColumnWidth(j, columnWidths[j]);
}
}
}
function initFunnel(sheet, chartType) {
sheet.resumePaint();
return sheet.charts.add((sheet.name() + chartType), chartType, 400, 0, 500, 400, "B2:C7");
}
function setCustomStyle(chart) {
var chartArea = chart.chartArea();
chartArea.backColor = {
type: GC.Spread.Sheets.Charts.PatternType.dottedPercent20,
foregroundColor: "rgb(0,176,80)",
backgroundColor: "background 1 0",
};
chart.chartArea(chartArea);
var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.color = 'white';
chart.dataLabels(dataLabels);
var seriesCollection = chart.series();
var series1 = seriesCollection.get(0);
series1.backColor = "green";
seriesCollection.set(0, series1);
var title = chart.title();
title.text = "Product Email Campaign";
title.fontSize = 16;
chart.title(title);
}
function setData(sheet, sheetName) {
sheet.name(sheetName);
sheet.suspendPaint();
var dataArray = [
['Stage', 'Users'],
['Sent', 5676],
['Viewed', 3872],
['Clicked', 1668],
['Add to Cart', 640],
['Purchased', 565],
];
sheet.setArray(1, 1, dataArray);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<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 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;
}