概述
本 Demo 展示了如何为图表元素设置图案填充，包括为柱状图的图表区域、数据系列以及树图的数据点应用不同的图案样式和颜色组合。
实现思路
创建两个图表：柱状图和树图，分别展示不同图表类型的图案填充效果
为柱状图的图表区域设置图案填充背景
为柱状图的三个数据系列分别设置不同的图案填充样式
为树图的多个数据点设置图案填充，增强数据可视化效果
设置树图的数据标签颜色，确保文字清晰可读
代码解析
为图表区域设置图案填充
这段代码为柱状图的图表区域设置图案填充。backColor 属性接收一个对象，包含三个属性：type 指定图案类型（使用 PatternType 枚举），foregroundColor 设置图案线条或点的颜色，backgroundColor 设置背景颜色。
为数据系列设置图案填充
这段代码获取第一个数据系列并设置图案填充。通过 series() 方法获取系列集合，使用 get() 方法获取指定索引的系列，修改其 backColor 属性后，使用 set() 方法应用更改。
为数据点设置图案填充
这段代码为树图的数据点设置图案填充。数据点使用 fillColor 属性（而不是 backColor），通过循环为每个数据点应用不同的图案样式。
运行效果
柱状图的背景区域显示了点状图案填充，使用绿色前景色和主题背景色
柱状图的三个数据系列分别显示不同的图案：深色垂直条纹、小网格和实心菱形
树图的各个数据块显示不同的图案填充，包括深色向上斜线、大棋盘格、浅色向上斜线和点状图案
所有图案填充都通过前景色和背景色的组合呈现丰富的视觉效果
API 参考
图案填充属性
type：图案类型，使用 GC.Spread.Sheets.Charts.PatternType 枚举，支持 48 种内置图案
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="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="spreadjs culture" content="zh-cn" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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="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;
}
