图案填充

图案填充能使图表元素背景色有更丰富的显示效果。 我们提供48种内置图案填充类型。

为了更丰富地自定义图表,现在您可以为图表元素的背景色设置常规的CSS颜色或图案填充。 您可以为以下的图表元素设置图案填充 title series data Label legend chartArea Customize: 图案填充有三个属性。 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="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; }