데이터 레이블을 사용하면 차트에 표시된 계열에서 값을 직접 확인할 수 있습니다. 범주 이름, 계열 이름 및 값을 표시하고 텍스트 서식을 적용하여 주요 차트 정보를 더 쉽게 파악할 수 있습니다.
이 샘플은 여러 차트 유형의 계열 데이터 레이블을 보여 줍니다. 차트를 선택하고 측면 패널의 옵션을 변경한 다음 설정을 클릭하면 선택한 차트 계열에 데이터 레이블 설정이 적용됩니다.
계열 데이터 레이블은 다음 사용자 지정을 지원합니다.
showCategoryName - 데이터 레이블에 범주 이름을 표시합니다.
showSeriesName - 데이터 레이블에 계열 이름을 표시합니다.
showValue - 데이터 레이블에 데이터 요소 값을 표시합니다.
color - 데이터 레이블의 텍스트 색을 설정합니다.
separator - 여러 레이블 부분 사이의 구분 기호를 설정합니다.
fontFamily - 데이터 레이블 글꼴을 설정합니다.
fontSize - 데이터 레이블 글꼴 크기를 설정합니다.
fontBold - 데이터 레이블 텍스트의 굵게 표시 여부를 설정합니다.
fontItalic - 데이터 레이블 텍스트의 기울임꼴 여부를 설정합니다.
fontUnderline - 데이터 레이블 밑줄 유형을 설정합니다.
fontStrikethrough - 데이터 레이블 텍스트의 취소선 여부를 설정합니다.
다음 코드로 차트 계열 데이터 레이블 스타일을 사용자 지정할 수 있습니다.
var spread;
var activeChart;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 12
});
initSpread(spread);
initEvents();
};
var defaultDataLabels = {
showCategoryName: false,
showSeriesName: false,
showValue: true,
color: "#243b53",
separator: ", ",
fontFamily: "Calibri",
fontSize: 11,
fontBold: false,
fontItalic: false,
fontUnderline: GC.Spread.Sheets.Charts.TextUnderlineType.none,
fontStrikethrough: false
};
function initSpread(spread) {
var sheets = spread.sheets;
spread.suspendPaint();
createStandardChart(sheets[0], "Area", GC.Spread.Sheets.Charts.ChartType.area);
createStandardChart(sheets[1], "Bar", GC.Spread.Sheets.Charts.ChartType.barClustered);
createStandardChart(sheets[2], "Column", GC.Spread.Sheets.Charts.ChartType.columnClustered);
createComboChart(sheets[3]);
createFunnelChart(sheets[4]);
createStandardChart(sheets[5], "Line", GC.Spread.Sheets.Charts.ChartType.lineMarkers);
createPieChart(sheets[6]);
createStandardChart(sheets[7], "Radar", GC.Spread.Sheets.Charts.ChartType.radarMarkers);
createScatterChart(sheets[8]);
createHierarchyChart(sheets[9], "Sunburst", GC.Spread.Sheets.Charts.ChartType.sunburst);
createHierarchyChart(sheets[10], "Treemap", GC.Spread.Sheets.Charts.ChartType.treemap);
createWaterfallChart(sheets[11]);
spread.options.tabStripRatio = 0.8;
spread.setActiveSheetIndex(0);
activeChart = getFirstChart(spread.getActiveSheet());
readSetting(activeChart);
spread.resumePaint();
}
function initEvents() {
spread.bind(GC.Spread.Sheets.Events.FloatingElementSelected, function () {
var chart = getActiveChart(spread.getActiveSheet());
if (chart) {
activeChart = chart;
readSetting(chart);
}
});
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function () {
activeChart = getFirstChart(spread.getActiveSheet());
readSetting(activeChart);
});
document.getElementById("apply").addEventListener("click", applySetting);
document.getElementById("fontSize").addEventListener("blur", normalizeFontSizeInput);
}
function createStandardChart(sheet, name, chartType) {
setupSheet(sheet, name);
setSalesData(sheet);
var chart = sheet.charts.add(name + "Chart", chartType, 260, 25, 700, 390, "A1:E5", GC.Spread.Sheets.Charts.RowCol.rows);
chart.title({ text: name + " Chart" });
setAxes(chart);
setSeriesDataLabels(chart, getInitialDataLabels(name));
}
function createComboChart(sheet) {
setupSheet(sheet, "Combo");
setSalesData(sheet);
var chart = sheet.charts.add("ComboChart", GC.Spread.Sheets.Charts.ChartType.columnClustered, 260, 25, 700, 390, "A1:E4", GC.Spread.Sheets.Charts.RowCol.rows);
chart.series().add({
chartType: GC.Spread.Sheets.Charts.ChartType.lineMarkers,
name: "A5",
xValues: "B1:E1",
yValues: "B5:E5",
border: { width: 3 }
});
chart.title({ text: "Combo Chart" });
setAxes(chart);
setSeriesDataLabels(chart, getInitialDataLabels("Combo"));
}
function createFunnelChart(sheet) {
setupSheet(sheet, "Funnel");
var data = [
["Stage", "Users"],
["Visits", 12000],
["Trials", 7800],
["Quotes", 4200],
["Orders", 2100],
["Renewals", 1200]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 6, 2);
var chart = sheet.charts.add("FunnelChart", GC.Spread.Sheets.Charts.ChartType.funnel, 260, 25, 700, 390, "A1:B6");
chart.title({ text: "Funnel Chart" });
setSeriesDataLabels(chart, getInitialDataLabels("Funnel"));
}
function createPieChart(sheet) {
setupSheet(sheet, "Pie");
var data = [
["Q1", "Q2", "Q3", "Q4"],
[31, 25, 28, 34]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 2, 4);
var chart = sheet.charts.add("PieChart", GC.Spread.Sheets.Charts.ChartType.pie, 260, 25, 700, 390, "A1:D2");
chart.title({ text: "Pie Chart" });
setSeriesDataLabels(chart, getInitialDataLabels("Pie"));
}
function createScatterChart(sheet) {
setupSheet(sheet, "Scatter");
var data = [
["Month", "Leads", "Revenue"],
[1, 12, 18],
[2, 19, 24],
[3, 24, 31],
[4, 31, 35],
[5, 35, 46],
[6, 45, 52],
[7, 48, 57],
[8, 57, 66],
[9, 63, 71]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 10, 3);
var chart = sheet.charts.add("ScatterChart", GC.Spread.Sheets.Charts.ChartType.xyScatterLines, 260, 25, 700, 390, "A1:C10", GC.Spread.Sheets.Charts.RowCol.columns);
chart.title({ text: "Scatter Chart" });
setAxes(chart);
setSeriesDataLabels(chart, getInitialDataLabels("Scatter"));
}
function createHierarchyChart(sheet, name, chartType) {
setupSheet(sheet, name);
setHierarchyData(sheet);
var chart = sheet.charts.add(name + "Chart", chartType, 260, 25, 700, 390, "A1:D16");
chart.title({ text: name + " Chart" });
setSeriesDataLabels(chart, getInitialDataLabels(name));
}
function createWaterfallChart(sheet) {
setupSheet(sheet, "Waterfall");
var data = [
["Item", "Amount"],
["Start", 5000],
["Product", 2300],
["Services", 1700],
["Discounts", -900],
["Returns", -500],
["Tax", -650],
["End", 6950]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 8, 2);
var chart = sheet.charts.add("WaterfallChart", GC.Spread.Sheets.Charts.ChartType.waterfall, 260, 25, 700, 390, "A1:B8");
var series = chart.series().get(0);
series.subtotals = [0, 7];
series.showConnectorLines = true;
chart.series().set(0, series);
chart.title({ text: "Waterfall Chart" });
setSeriesDataLabels(chart, getInitialDataLabels("Waterfall"));
}
function setupSheet(sheet, name) {
sheet.name(name);
sheet.suspendPaint();
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.setColumnWidth(0, 95);
sheet.setColumnWidth(1, 85);
sheet.setColumnWidth(2, 85);
sheet.setColumnWidth(3, 85);
sheet.setColumnWidth(4, 85);
sheet.resumePaint();
}
function setSalesData(sheet) {
var data = [
["Product", "Q1", "Q2", "Q3", "Q4"],
["Bike", 42, 48, 53, 61],
["Helmet", 27, 31, 36, 40],
["Jersey", 18, 24, 30, 33],
["Shoes", 22, 28, 34, 39]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 5, 5);
}
function setHierarchyData(sheet) {
var data = [
["Region", "Subregion", "Country", "Revenue"],
["Asia", "East", "Japan", 420],
[, , "Korea", 310],
[, "South", "India", 520],
[, , "Singapore", 180],
["Europe", "West", "France", 280],
[, , "Germany", 450],
[, "North", "Sweden", 160],
[, , "Norway", 120],
["Americas", "North", "United States", 670],
[, , "Canada", 260],
[, "South", "Brazil", 350],
[, , "Chile", 140],
["Africa", "East", "Kenya", 150],
[, "West", "Ghana", 110]
];
sheet.setArray(0, 0, data);
styleDataRange(sheet, 16, 4);
}
function styleDataRange(sheet, rowCount, colCount) {
sheet.getRange(0, 0, rowCount, colCount).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet.getRange(0, 0, 1, colCount).font("bold normal 10pt Arial");
sheet.getRange(0, 0, rowCount, colCount).setBorder(
new GC.Spread.Sheets.LineBorder("#d9d9d9", GC.Spread.Sheets.LineStyle.thin),
{ all: true }
);
}
function setAxes(chart) {
var axes = chart.axes();
if (axes.primaryCategory && axes.primaryCategory.majorGridLine) {
axes.primaryCategory.majorGridLine.visible = false;
}
if (axes.primaryValue && axes.primaryValue.majorGridLine) {
axes.primaryValue.majorGridLine.visible = true;
}
chart.axes(axes);
}
function getInitialDataLabels(chartName) {
var labels = clone(defaultDataLabels);
if (chartName === "Pie" || chartName === "Funnel" || chartName === "Sunburst" || chartName === "Treemap") {
labels.showCategoryName = true;
}
if (chartName === "Sunburst" || chartName === "Treemap" || chartName === "Funnel") {
labels.color = "#ffffff";
labels.fontBold = true;
}
return labels;
}
function setSeriesDataLabels(chart, dataLabelsOption) {
var series = chart.series().get(0);
if (!series) {
return;
}
var dataLabels = clone(dataLabelsOption);
dataLabels.fontSize = clampFontSize(dataLabels.fontSize);
series.dataLabels = dataLabels;
chart.series().set(0, series);
}
function readSetting(chart) {
if (!chart) {
return;
}
var series = chart.series().get(0);
var dataLabels = series && series.dataLabels ? series.dataLabels : defaultDataLabels;
getElement("showCategoryName").checked = !!dataLabels.showCategoryName;
getElement("showSeriesName").checked = !!dataLabels.showSeriesName;
getElement("showValue").checked = dataLabels.showValue !== false;
getElement("color").value = normalizeColor(dataLabels.color || defaultDataLabels.color);
getElement("separator").value = dataLabels.separator === undefined ? defaultDataLabels.separator : dataLabels.separator;
getElement("fontFamily").value = dataLabels.fontFamily || defaultDataLabels.fontFamily;
getElement("fontSize").value = clampFontSize(dataLabels.fontSize);
getElement("fontBold").checked = !!dataLabels.fontBold;
getElement("fontItalic").checked = !!dataLabels.fontItalic;
getElement("fontUnderline").value = dataLabels.fontUnderline || GC.Spread.Sheets.Charts.TextUnderlineType.none;
getElement("fontStrikethrough").checked = !!dataLabels.fontStrikethrough;
}
function applySetting() {
var chart = getActiveChart(spread.getActiveSheet()) || activeChart || getFirstChart(spread.getActiveSheet());
if (!chart) {
return;
}
activeChart = chart;
var dataLabels = readPanel();
setSeriesDataLabels(chart, dataLabels);
readSetting(chart);
}
function normalizeFontSizeInput() {
getElement("fontSize").value = clampFontSize(getElement("fontSize").value);
}
function readPanel() {
return {
showCategoryName: getElement("showCategoryName").checked,
showSeriesName: getElement("showSeriesName").checked,
showValue: getElement("showValue").checked,
color: getElement("color").value,
separator: getElement("separator").value,
fontFamily: getElement("fontFamily").value,
fontSize: clampFontSize(getElement("fontSize").value),
fontBold: getElement("fontBold").checked,
fontItalic: getElement("fontItalic").checked,
fontUnderline: parseInt(getElement("fontUnderline").value, 10),
fontStrikethrough: getElement("fontStrikethrough").checked
};
}
function getActiveChart(sheet) {
var selectedChart = null;
sheet.charts.all().forEach(function (chart) {
if (chart.isSelected()) {
selectedChart = chart;
}
});
return selectedChart;
}
function getFirstChart(sheet) {
var charts = sheet.charts.all();
return charts.length ? charts[0] : null;
}
function normalizeColor(color) {
var match = /^rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(color || "");
if (!match) {
return color && color.charAt(0) === "#" ? color : defaultDataLabels.color;
}
return "#" + toHex(parseInt(match[1], 10)) + toHex(parseInt(match[2], 10)) + toHex(parseInt(match[3], 10));
}
function toHex(value) {
var hex = value.toString(16);
return hex.length === 1 ? "0" + hex : hex;
}
function clampFontSize(value) {
var fontSize = parseInt(value, 10);
if (isNaN(fontSize)) {
return defaultDataLabels.fontSize;
}
return Math.min(Math.max(fontSize, 1), 5333);
}
function clone(value) {
return JSON.parse(JSON.stringify(value));
}
function getElement(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ko-kr" />
<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-spreadsheets"></div>
<div class="options-container">
<div class="panel-title">계열 데이터 레이블</div>
<div class="field-group">
<div class="group-title">레이블 내용</div>
<div class="checkbox-grid">
<label><input type="checkbox" id="showValue" /> 값</label>
<label><input type="checkbox" id="showSeriesName" /> 계열 이름</label>
<label><input type="checkbox" id="showCategoryName" /> 범주 이름</label>
</div>
</div>
<div class="field-group">
<div class="group-title">텍스트</div>
<div class="option-row">
<label for="color">색</label>
<input id="color" type="color" />
</div>
<div class="option-row">
<label for="separator">구분 기호</label>
<select id="separator">
<option value=", ">, (쉼표)</option>
<option value="; ">; (세미콜론)</option>
<option value=". "> . (마침표)</option>
<option value=" ">줄 바꿈</option>
<option value=" ">공백</option>
</select>
</div>
<div class="option-row">
<label for="fontFamily">글꼴</label>
<select id="fontFamily">
<option value="Calibri">Calibri</option>
<option value="Arial">Arial</option>
<option value="Cambria">Cambria</option>
<option value="Georgia">Georgia</option>
<option value="Segoe UI">Segoe UI</option>
</select>
</div>
<div class="option-row">
<label for="fontSize">글꼴 크기</label>
<input id="fontSize" type="number" min="1" max="5333" step="1" />
</div>
</div>
<div class="field-group">
<div class="group-title">스타일</div>
<div class="checkbox-grid style-grid">
<label><input type="checkbox" id="fontBold" /> 굵게</label>
<label><input type="checkbox" id="fontItalic" /> 기울임꼴</label>
<label><input type="checkbox" id="fontStrikethrough" /> 취소선</label>
</div>
</div>
<div class="option-row">
<label for="fontUnderline">밑줄 유형</label>
<select id="fontUnderline">
<option value="0">없음</option>
<option value="1">단일</option>
</select>
</div>
<div class="option-row">
<input type="button" id="apply" class="apply-button" value="설정" />
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 14px 14px 16px;
height: 100%;
box-sizing: border-box;
background: #f7f8fa;
border-left: 1px solid #ddd;
overflow: auto;
}
.panel-title {
margin: 2px 0 12px;
font-weight: 600;
color: #333;
}
.option-row {
font-size: 14px;
padding-bottom: 8px;
}
.option-row label {
display: inline-block;
margin-bottom: 4px;
color: #333;
}
.option-row input,
.option-row select {
width: 100%;
min-height: 26px;
padding: 2px 6px;
box-sizing: border-box;
border: 1px solid #c9ced6;
border-radius: 3px;
background: #fff;
}
.field-group {
margin-bottom: 10px;
padding-bottom: 4px;
border-bottom: 1px solid #e4e7eb;
}
.group-title {
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
color: #667085;
}
.checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 10px;
}
.checkbox-grid label {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 13px;
}
.checkbox-grid input {
width: auto;
min-height: auto;
padding: 0;
border: 0;
background: transparent;
}
.style-grid {
grid-template-columns: 1fr 1fr 1fr;
}
.apply-button {
height: 30px;
color: #fff;
background: #2f6fed !important;
border-color: #2f6fed !important;
cursor: pointer;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
