チャートのカスタマイズをより豊かにするために、チャート要素の背景色に通常のCSSカラーや塗りつぶしパターンを設定することができるようになりました。
以下のチャート要素に塗りつぶしパターンを設定することができます。
タイトル
系列
データラベル
凡例
チャートエリア
カスタマイズ: 塗りつぶしパターンには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="ja-jp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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;
}
