概述
本 Demo 展示了如何自定义图表区（Chart Area）的样式，包括背景颜色、文本样式和边框样式。Demo 创建了一个折线图，并通过右侧的控制面板让用户可以实时调整图表区的各项样式属性，查看效果变化。
实现思路
创建工作表并填充示例数据
使用 sheet.charts.add() 方法创建折线图
通过 chart.chartArea() 获取图表区对象
设置图表区的背景、文本和边框样式
监听图表选中事件，选中图表时读取当前样式并显示在控制面板
点击"Set"按钮时，应用控制面板中的样式设置
代码解析
创建图表并设置初始样式
这段代码首先创建了一个折线图，然后通过 chart.chartArea() 方法获取图表区对象，并设置其样式属性。最后通过 chart.chartArea(chartArea) 将修改后的样式应用到图表。
读取图表区样式
当用户选中图表时，readSetting 函数会读取当前图表区的样式属性，并将值显示在右侧的控制面板中。
应用样式设置
点击"Set"按钮时，applySetting 函数会从控制面板读取用户输入的样式值，构建新的图表区配置对象，并应用到选中的图表上。
运行效果
页面加载后显示一个折线图，图表区已应用预设的样式（橙色背景、绿色边框和文本）
点击图表选中后，右侧控制面板会显示当前图表区的样式值
在控制面板中修改任意属性值（如背景颜色、字体大小、边框宽度等）
点击"Set"按钮，图表区的样式会立即更新
可以实时预览不同样式组合的效果
API 参考
chartArea() 方法
IChartArea 接口属性
backColor: 背景颜色，支持颜色字符串或图案填充对象
backColorTransparency: 背景颜色透明度，取值范围 0-1
color: 文本颜色
transparency: 文本透明度，取值范围 0-1
fontFamily: 字体家族
fontSize: 字体大小，单位为像素
border: 边框设置对象
color: 边框颜色
width: 边框宽度
transparency: 边框透明度，取值范围 0-1
dashStyle: 边框线型，使用 GC.Spread.Sheets.Charts.LineType 枚举值
var spread;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
initEvent(spread);
//readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList());
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.suspendPaint();
var dataArray = [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158],
["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192],
["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
sheet.setArray(0, 0, dataArray);
var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 30, 120, 480, 270, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns);
chart.title({text: "Chart Area Customization"});
var chartArea = chart.chartArea();
chartArea.border.color = "green";
chartArea.border.width = 3;
chartArea.fontSize = 9;
chartArea.color = "green";
chartArea.backColor = "orange";
chartArea.backColorTransparency = 0.8;
chart.chartArea(chartArea);
sheet.resumePaint();
};
function initEvent(spread) {
spread.bind(GC.Spread.Sheets.Events.FloatingElementSelected, function () {
var sheet = spread.getActiveSheet();
var chart = getActiveChart(sheet);
if (chart) {
readSetting(chart);
}
});
_getElementById("apply").addEventListener('click', function () {
applySetting();
});
};
function readSetting(chart) {
var chartArea = chart.chartArea();
_getElementById("backColor").value = chartArea.backColor;
_getElementById("backColorTransparency").value = chartArea.backColorTransparency;
_getElementById("fontFamily").value = chartArea.fontFamily;
_getElementById("fontSize").value = chartArea.fontSize;
_getElementById("color").value = chartArea.color;
_getElementById("transparency").value = chartArea.transparency;
_getElementById("border-color").value = chartArea.border.color;
_getElementById("border-transparency").value = chartArea.border.transparency;
_getElementById("border-width").value = chartArea.border.width;
_getElementById("border-dashStyle").value = chartArea.border.dashStyle;
}
function applySetting() {
var sheet = spread.getActiveSheet();
var chart = getActiveChart(sheet);
if (!chart) {
return;
}
var chartArea = {
backColor: _getText("backColor"),
backColorTransparency: _getFloat("backColorTransparency"),
color: _getText("color"),
transparency: _getFloat("transparency"),
fontFamily: _getText("fontFamily"),
fontSize: _getValue("fontSize"),
border:{
color: _getText("border-color"),
width: _getValue("border-width"),
transparency: _getFloat("border-transparency"),
dashStyle: _getValue("border-dashStyle")
},
}
chart.chartArea(chartArea);
}
function getActiveChart(sheet) {
var activeChart = null;
sheet.charts.all().forEach(function (chart) {
if (chart.isSelected()) {
activeChart = chart;
}
});
return activeChart;
}
function _getElementById(id) {
return document.getElementById(id);
}
function _geBoolean(id) {
return _getElementById(id).checked;
}
function _getFloat(id) {
return parseFloat(_getElementById(id).value);
}
function _getValue(id) {
return parseInt(_getElementById(id).value);
}
function _getText(id) {
return _getElementById(id).value;
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 class="options-container">
<p>Change the properties below then press the Set button to apply these changes.</p>
<div class="option-row" id="">
<label for="backColor">Back Color</label>
<input type="text" id="backColor" value="#FF0000" />
</div>
<div class="option-row" id="">
<label for="backColorTransparency">Back Color Transparency</label>
<input type="number" id="backColorTransparency" step="0.1" min="0" max="1" value="0.7" />
</div>
<div class="option-row" id="">
<label for="fontFamily">Font Family</label>
<input type="text" id="fontFamily" value="Calibri" />
</div>
<div class="option-row" id="">
<label for="fontSize">Font Size</label>
<input type="number" id="fontSize" step="1" min="0" max="100" value="1" />
</div>
<div class="option-row" id="">
<label for="color">Color</label>
<input type="text" id="color" value="#00FF00" />
</div>
<div class="option-row" id="">
<label for="transparency">Transparency</label>
<input type="number" id="transparency" step="0.1" min="0" max="1" value="0.7" />
</div>
<hr>
<div class="option-row" id="">
<label for="border-color">Border Color:</label>
<input type="text" id="border-color" value="#00FF00" />
</div>
<div class="option-row" id="">
<label for="border-transparency">Border Transparency:</label>
<input type="number" id="border-transparency" step="0.1" min="0" max="1" value="1" />
</div>
<div class="option-row" id="">
<label for="border-width">Border Width:</label>
<input type="number" id="border-width" step="1" min="0" max="100" value="1" />
</div>
<div class="option-row" id="">
<label for="border-dashStyle">Border DashStyle:</label>
<select id="border-dashStyle">
<option value="0" selected="selected">solid</option>
<option value="1">dot</option>
<option value="2">dash</option>
<option value="3">lgDash</option>
<option value="4">dashDot</option>
<option value="5">lgDashDot</option>
<option value="6">lgDashDotDot</option>
<option value="7">sysDash</option>
<option value="8">sysDot</option>
<option value="9">sysDashDot</option>
<option value="10">sysDashDotDot</option>
</select>
</div>
<div class="option-row">
<input type="button" id="apply" value="Set" />
</div>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.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;
}
