차트를 더욱 다양한 방식으로 사용자 정의하기 위해 이제 차트 요소 배경색에 대해 일반 css 색 또는 패턴 채우기를 설정할 수 있습니다.
아래 차트 요소에 대해 패턴 채우기를 설정할 수 있습니다.
title
series
data Label
legend
chartArea
사용자 정의: 패턴 채우기에는 다음과 같은 3가지 속성이 있습니다.
type: 패턴 채우기 유형을 지정하며, GC.Spread.Sheets.Charts.PatternType을 참조합니다.
foregroundColor: 선 또는 점의 패턴 채우기 색을 지정합니다.
backgroundColor: 패턴 채우기 배경색을 지정합니다.
다음 코드를 사용하여 패턴 채우기를 사용자 정의할 수 있습니다.
var spread;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
var dataArray1 = [
["", '2012', '2013', '2014', '2015', '2016', '2017'],
["Chrome", 5.782, 6.263, 7.766, 8.389, 9.830, 11.260],
["FireFox", 4.284, 4.130, 3.951, 3.760, 3.631, 3.504],
["IE", 2.814, 2.491, 2.455, 1.652, 1.073, 0.834],
];
var dataArray2 = [
['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]
];
sheet.setArray(0, 0, dataArray1);
sheet.setArray(0, 8, dataArray2);
var columnChart = sheet.charts.add('columnChart', GC.Spread.Sheets.Charts.ChartType.columnClustered, 2, 85, 400, 350, 'A1:G4');
var treemapChart = sheet.charts.add('treemapChart', GC.Spread.Sheets.Charts.ChartType.treemap, 450, 85, 400, 350, 'I1:L17');
var chartArea = columnChart.chartArea();
chartArea.backColor = {
type: GC.Spread.Sheets.Charts.PatternType.dottedPercent20,
foregroundColor: "rgb(0,176,80)",
backgroundColor: "background 1 0",
};
columnChart.chartArea(chartArea);
var seriesCollection = columnChart.series();
var series0 = seriesCollection.get(0);
series0.backColor = {
type: GC.Spread.Sheets.Charts.PatternType.darkVertical,
foregroundColor: "blue",
backgroundColor: "white",
};
seriesCollection.set(0, series0);
var series1 = seriesCollection.get(1);
series1.backColor = {
type: GC.Spread.Sheets.Charts.PatternType.smallGrid,
foregroundColor: "green",
backgroundColor: "white",
};
seriesCollection.set(1, series1);
var series2 = seriesCollection.get(2);
series2.backColor = {
type: GC.Spread.Sheets.Charts.PatternType.solidDiamond,
foregroundColor: "orange",
backgroundColor: "white",
};
seriesCollection.set(2, series2)
var dataPoints = treemapChart.series().dataPoints();
var fillColors = [{
type: GC.Spread.Sheets.Charts.PatternType.darkUpwardDiagonal,
foregroundColor: "LightGreen",
backgroundColor: "white",
}, {
type: GC.Spread.Sheets.Charts.PatternType.largeCheckerBoard,
foregroundColor: "yellow",
backgroundColor: "white",
},
{
type: GC.Spread.Sheets.Charts.PatternType.lightUpwardDiagonal,
foregroundColor: "purple",
backgroundColor: "white",
},
{
type: GC.Spread.Sheets.Charts.PatternType.dottedPercent40,
foregroundColor: "LightBlue",
backgroundColor: "white",
}
];
for (var i = 0; i < fillColors.length; i++) {
var dataPoint = dataPoints.get(i);
dataPoint.fillColor = fillColors[i];
dataPoints.set(i, dataPoint);
}
var dataLabels = treemapChart.dataLabels();
dataLabels.color='black';
treemapChart.dataLabels(dataLabels);
sheet.resumePaint();
};
<!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 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;
}