Hover Style: SpreadJS supports the following hover style customizations:
the color and transparency
Border: color, transparency, width, dash style
Symbol: color, transparency
Symbol Border: color, transparency, width, dash style
You can customize the hover style using the following code:
Hover Animation: Hover animation can help to improve the user experience when interacting with the chart. You can use the useAnimation() API to set whether or not to apply animation to the chart.
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, 494, 0, 480, 270, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns);
chart.title({text: "HoverStyle with markers"});
var seriesItem = chart.series().get(0);
seriesItem.symbol.size = 20;
chart.series().set(0, seriesItem);
var hoverStyle = {
color: "orange",
transparency: 0.1,
borderStyle: {
transparency: 0.1,
color: '#FF0000',
width: 3,
dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash
},
symbolStyle: {
color: "yellow",
transparency: 0.1,
borderStyle: {
transparency: 0.1,
color: 'rgb(0, 0, 255)',
width: 9,
dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash
}
}
};
chart.hoverStyle(hoverStyle);
var chart2 = sheet.charts.add('Chart2', GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 494, 275, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns);
chart2.title({text: "Default HoverStyle"});
var chart3 = sheet.charts.add('Chart3', GC.Spread.Sheets.Charts.ChartType.pie, 494, 270, 480, 270, 'A1:H2');
chart3.title({text: "HoverStyle with Animation"});
chart3.useAnimation(true);
var hoverStyle3 = {
color: "orange",
transparency: 0.6,
borderStyle: {
transparency: 0.1,
color: '#FF0000',
width: 9,
dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash
}
};
chart3.hoverStyle(hoverStyle3);
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) {
_getElementById("useAnimation").checked = chart.useAnimation();
var hoverStyle = chart.hoverStyle();
if (!hoverStyle) {
return;
}
_getElementById("color").value = hoverStyle.color || "";
_getElementById("transparency").value = hoverStyle.transparency;
_getElementById("border-color").value = hoverStyle.borderStyle.color || "";
_getElementById("border-width").value = hoverStyle.borderStyle.width || 0;
_getElementById("border-transparency").value = hoverStyle.borderStyle.transparency;
_getElementById("border-dashStyle").value = hoverStyle.borderStyle.dashStyle;
_getElementById("symbol-color").value = hoverStyle.symbolStyle.color || "";
_getElementById("symbol-transparency").value = hoverStyle.symbolStyle.transparency;
_getElementById("symbol-border-color").value = hoverStyle.symbolStyle.borderStyle.color || "";
_getElementById("symbol-border-width").value = hoverStyle.symbolStyle.borderStyle.width || 0;
_getElementById("symbol-border-transparency").value = hoverStyle.symbolStyle.borderStyle.transparency;
_getElementById("symbol-border-dashStyle").value = hoverStyle.symbolStyle.borderStyle.dashStyle;
}
function applySetting() {
var sheet = spread.getActiveSheet();
var chart = getActiveChart(sheet);
if (!chart) {
return;
}
chart.useAnimation( _geBoolean("useAnimation"));
var hoverStyle = {
color: _getText("color"),
transparency: _getFloat("transparency"),
borderStyle:{
color: _getText("border-color"),
width: _getValue("border-width"),
transparency: _getFloat("border-transparency"),
dashStyle: _getValue("border-dashStyle"),
},
symbolStyle:{
color: _getText("symbol-color"),
transparency: _getFloat("symbol-transparency"),
borderStyle:{
color: _getText("symbol-border-color"),
width: _getValue("symbol-border-width"),
transparency: _getFloat("symbol-border-transparency"),
dashStyle: _getValue("symbol-border-dashStyle"),
}
}
}
chart.hoverStyle(hoverStyle);
}
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 charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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">
<div class="option-row">
<label for="useAnimation">useAnimation</label>
<input type="checkbox" id="useAnimation" checked />
</div>
<div class="option-row" id="">
<label for="color">Color:</label>
<input type="text" id="color" value="#FF0000" />
</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>
<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-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-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-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>
<hr>
<div class="option-row" id="">
<label for="symbol-color">Symbol Color:</label>
<input type="text" id="symbol-color" value="orange" />
</div>
<div class="option-row" id="">
<label for="symbol-transparency">Symbol Transparency:</label>
<input type="number" id="symbol-transparency" step="0.1" min="0" max="1" value="0.7" />
</div>
<div class="option-row" id="">
<label for="symbol-border-color">Symbol Border Color:</label>
<input type="text" id="symbol-border-color" value="rgb(255,0,255)" />
</div>
<div class="option-row" id="">
<label for="symbol-border-width">Symbol Border Width:</label>
<input type="number" id="symbol-border-width" step="1" min="0" max="100" value="1" />
</div>
<div class="option-row" id="">
<label for="symbol-border-transparency">Symbol Border Transparency:</label>
<input type="number" id="symbol-border-transparency" step="0.1" min="0" max="1" value="0.7" />
</div>
<div class="option-row" id="">
<label for="symbol-border-dashStyle">Symbol Border DashStyle:</label>
<select id="symbol-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;
}
