계열 스타일 위에서 의미 있는 특별한 데이터 요소에 대해 특별한 스타일을 설정할 수 있습니다. 데이터 요소 스타일은 데이터 프레젠테이션을 더욱 집중하기 좋게 만들고 차트를 더욱 직관적이며 효율적으로 만들 수 있습니다.
차트 유형마다 데이터 요소 스타일이 다음과 같은 사용자 정의 기능을 지원합니다.
backColor - 데이터 요소 또는 데이터 요소 표식의 단색 또는 패턴 배경색.
backColorTransparency - 데이터 요소 또는 데이터 요소 표식의 배경색 투명도
border.color - 데이터 요소의 테두리 색.
border.transparency - 데이터 요소의 테두리 색 투명도.
border.width - 데이터 요소의 테두리 두께.
border.lineType - 데이터 요소의 테두리 선 유형.
아래 코드로 차트의 데이터 요소 스타일을 사용자 정의할 수 있습니다.
var spread;
var colorArray = ['rgb(120, 180, 240)', 'rgb(240, 160, 80)', 'rgb(140, 240, 120)', 'rgb(120, 150, 190)'];
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
sheetCount: 4
});
initSpread(spread);
}
function initSpread(spread) {
var chartType = [{
type: GC.Spread.Sheets.Charts.ChartType.columnClustered,
desc: "columnClustered",
position: [15, 100, 1300, 400],
dataArray: [
["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
'Dec'
],
["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 146.0, 135.6, 148.5, 256.4, 155.1,
95.6, 54.4
],
["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 199.5, 105.0, 104.3, 91.2, 83.5, 106.6,
92.3
],
["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 186.2, 59.3,
51.2
],
["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 178.6, 39.1, 46.8, 51.1]
],
dataFormula: "A1:M5",
dataPoinsStyle: [{
8: {
backColor: "red",
backColorTransparency: 0.1,
border: {
color: 'rgb(120, 180, 240)',
width: 5,
}
},
},
{
5: {
backColor: "black",
backColorTransparency: 0.1,
border: {
color: 'rgb(240, 160, 80)',
width: 5,
}
}
},
{
9: {
backColor: "black",
backColorTransparency: 0.1,
border: {
color: 'rgb(140, 240, 120)',
width: 5,
}
},
},
{
8: {
backColor: "black",
backColorTransparency: 0.1,
border: {
color: 'rgb(120, 150, 190)',
width: 5,
}
}
}
],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "The Average Monthly Rainfall");
changChartDataLabels(chart);
chart.axes({
primaryValue: {
title: {
text: "Rainfall(mm)"
}
}
});
changeChartSeriesColor(chart);
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
changeChartSeriesGapWidthAndOverLap(chart);
}
},
{
type: GC.Spread.Sheets.Charts.ChartType.barClustered,
desc: "barClustered",
position: [15, 100, 1300, 400],
dataArray: [
["", 'Tokyo', 'New York', 'London', 'Berlin'],
["The First Quarter", 227.8, 260.9, 127, 110.1],
["The Second Quarter", 449.2, 283.9, 136.7, 167.8],
["The Third Quarter", 500.5, 300.5, 171, 165.4],
["The Fourth Quarter", 344.1, 282.4, 175.7, 137]
],
dataFormula: "A1:E5",
dataPoinsStyle: [, ,
{
0: {
backColor: "red",
backColorTransparency: 0.1,
border: {
color: 'gray',
width: 5,
}
}
}
],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "The Average Quarterly Rainfall");
changChartDataLabels(chart);
changeChartSeriesColor(chart);
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
changeChartSeriesGapWidthAndOverLap(chart);
}
},
{
type: GC.Spread.Sheets.Charts.ChartType.pie,
desc: "pie",
position: [15, 100, 700, 400],
dataArray: [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
],
dataFormula: "A1:H2",
dataPoinsStyle: [{
0: {
backColor: {
type: GC.Spread.Sheets.Charts.PatternType.wideUpwardDiagonal,
foregroundColor: "white",
backgroundColor: "LightBlue",
},
backColorTransparency: 0.1,
},
},],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "Browser Market Share");
changChartDataLabels(chart);
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
}
},
{
type: GC.Spread.Sheets.Charts.ChartType.sunburst,
desc: "sunburst",
position: [300, 50, 700, 400],
dataArray: [
['Region', 'Subregion', 'Country', 'Population'],
['Asia', 'Southern', 'India', 1354051854],
[, , 'Pakistan', 200813818],
[, , 'Bangladesh', 166368149],
[, , 'Others', 170220300],
[, 'Eastern', 'China', 1415045928],
[, , 'Japan', 127185332],
[, , 'Others', 111652273],
[, 'South-Eastern', , 655636576],
[, 'Western', , 272298399],
[, 'Central', , 71860465],
['Africa', 'Eastern', , 433643132],
[, 'Western', , 381980688],
[, 'Northern', , 237784677],
[, 'Others', , 234512021],
['Europe', , , 742648010],
['Others', , , 1057117703]
],
dataFormula: "A1:D17",
dataPoinsStyle: [{
6: {
backColor: "limegreen ",
border: {
color: 'lightcyan ',
width: 9,
}
}
},],
changeStyle: function (chart, dataPoinsStyle) {
changeChartTitle(chart, "World Population");
changeChartSeriesDataPointStyle(chart, dataPoinsStyle);
}
}
];
var sheets = spread.sheets;
spread.suspendPaint();
for (var i = 0; i < chartType.length; i++) {
var sheet = sheets[i];
initSheet(sheet, chartType[i].desc, chartType[i].dataArray);
var chart = addChart(sheet, chartType[i].type, chartType[i].dataFormula, chartType[i].position); //add chart
chartType[i].changeStyle(chart, chartType[i].dataPoinsStyle);
}
spread.resumePaint();
}
function initSheet(sheet, sheetName, dataArray) {
sheet.name(sheetName);
//prepare data for chart
sheet.setArray(0, 0, dataArray);
sheet.setColumnCount(100);
}
function addChart(sheet, chartType, dataFormula, position) {
//add chart
return sheet.charts.add((sheet.name() + 'Chart1'), chartType, position[0], position[1], position[2], position[3], dataFormula, GC
.Spread.Sheets.Charts.RowCol.rows);
}
function changeChartTitle(chart, title) {
chart.title({
text: title
});
}
// show dataLabels
function changChartDataLabels(chart) {
var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.outsideEnd;
chart.dataLabels(dataLabels);
}
//change point style
function changeChartSeriesDataPointStyle(chart, dataPoinsStyle) {
var series = chart.series().get();
for (var i = 0; i < series.length; i++) {
if (dataPoinsStyle[i]) {
chart.series().set(i, {
dataPoints: dataPoinsStyle[i]
});
}
}
}
//change color
function changeChartSeriesColor(chart) {
var series = chart.series().get();
for (var i = 0; i < series.length; i++) {
chart.series().set(i, {
backColor: colorArray[i]
});
}
}
function changeChartSeriesGapWidthAndOverLap(chart) {
var seriesItem = chart.series().get(0);
seriesItem.gapWidth = 2;
seriesItem.overlap = -0.5;
chart.series().set(0, seriesItem);
}
<!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$/spread/source/js/license.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="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;
}
.option-row {
font-size: 14px;
padding: 5px;
}
.option-row {
padding-bottom: 5px;
}
label {
display:inline-block;
}
input{
padding: 1px 8px;
box-sizing: border-box;
width: 100%;
}
select{
width: 100%;
}
input[type=checkbox] {
display: inline-block;
width: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}