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.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet />
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<label for="useAnimation">useAnimation</label>
<input type="checkbox" id="useAnimation" v-model="useAnimation" />
</div>
<div class="option-row" id="">
<label for="color">Color:</label>
<input type="text" id="color" v-model="color" />
</div>
<div class="option-row" id="">
<label for="transparency">Transparency:</label>
<input type="number" id="transparency" step="0.1" min="0" max="1" v-model="transparency" />
</div>
<div class="option-row" id="">
<label for="border-color">Border Color:</label>
<input type="text" id="border-color" v-model="borderColor" />
</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" v-model="borderWidth" />
</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" v-model="borderTransparency" />
</div>
<div class="option-row" id="">
<label for="border-dashStyle">Border DashStyle:</label>
<select id="border-dashStyle" v-model="borderDashStyle">
<option value="0">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" v-model="symbolColor" />
</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" v-model="symbolTransparency" />
</div>
<div class="option-row" id="">
<label for="symbol-border-color">Symbol Border Color:</label>
<input type="text" id="symbol-border-color" v-model="symbolBorderColor" />
</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" v-model="symbolBorderWidth" />
</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"
v-model="symbolBorderTransparency" />
</div>
<div class="option-row" id="">
<label for="symbol-border-dashStyle">Symbol Border DashStyle:</label>
<select id="symbol-border-dashStyle" v-model="symbolBorderDashStyle">
<option value="0">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" @click="applySetting" />
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import '@mescius/spread-sheets-vue';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
const spread = ref(null);
const useAnimation = ref(true);
const color = ref('#FF0000');
const transparency = ref(0.7);
const borderColor = ref('#00FF00');
const borderWidth = ref(1);
const borderTransparency = ref(1);
const borderDashStyle = ref('0');
const symbolColor = ref('orange');
const symbolTransparency = ref(0.7);
const symbolBorderColor = ref('rgb(255,0,255)');
const symbolBorderWidth = ref(1);
const symbolBorderTransparency = ref(0.7);
const symbolBorderDashStyle = ref('0');
const initSpread = (spreadInstance) => {
spread.value = spreadInstance;
spreadInstance.setSheetCount(2);
const sheet = spreadInstance.getSheet(0);
sheet.suspendPaint();
const 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);
const 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',
});
const seriesItem = chart.series().get(0);
seriesItem.symbol.size = 20;
chart.series().set(0, seriesItem);
const 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);
const 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',
});
const 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);
const hoverStyle3 = {
color: 'orange',
transparency: 0.6,
borderStyle: {
transparency: 0.1,
color: '#FF0000',
width: 9,
dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash,
},
};
chart3.hoverStyle(hoverStyle3);
initEvent(spreadInstance);
readSetting(chart);
sheet.resumePaint();
};
const initEvent = () => {
spread.value.bind(GC.Spread.Sheets.Events.FloatingElementSelected, () => {
const sheet = spread.value.getActiveSheet();
const chart = getActiveChart(sheet);
if (chart) {
readSetting(chart);
}
});
};
const readSetting = (chart) => {
const useAnimationValue = chart.useAnimation();
const hoverStyle = chart.hoverStyle();
if (!hoverStyle) return;
useAnimation.value = useAnimationValue;
color.value = hoverStyle.color;
transparency.value = hoverStyle.transparency;
borderColor.value = hoverStyle.borderStyle.color;
borderWidth.value = hoverStyle.borderStyle.width;
borderTransparency.value = hoverStyle.borderStyle.transparency;
borderDashStyle.value = hoverStyle.borderStyle.dashStyle;
symbolColor.value = hoverStyle.symbolStyle.color;
symbolTransparency.value = hoverStyle.symbolStyle.transparency;
symbolBorderColor.value = hoverStyle.symbolStyle.borderStyle.color;
symbolBorderWidth.value = hoverStyle.symbolStyle.borderStyle.width;
symbolBorderTransparency.value = hoverStyle.symbolStyle.borderStyle.transparency;
symbolBorderDashStyle.value = hoverStyle.symbolStyle.borderStyle.dashStyle;
};
const applySetting = () => {
const sheet = spread.value.getActiveSheet();
const chart = getActiveChart(sheet);
if (!chart) return;
chart.useAnimation(useAnimation.value);
const hoverStyle = {
color: color.value,
transparency: parseFloat(transparency.value),
borderStyle: {
color: borderColor.value,
width: parseInt(borderWidth.value, 10),
transparency: parseFloat(borderTransparency.value),
dashStyle: parseFloat(borderDashStyle.value),
},
symbolStyle: {
color: symbolColor.value,
transparency: parseFloat(symbolTransparency.value),
borderStyle: {
color: symbolBorderColor.value,
width: parseInt(symbolBorderWidth.value, 10),
transparency: parseFloat(symbolBorderTransparency.value),
dashStyle: parseFloat(symbolBorderDashStyle.value),
},
},
};
chart.hoverStyle(hoverStyle);
};
const getActiveChart = (sheet) => {
let activeChart = null;
sheet.charts.all().forEach((chart) => {
if (chart.isSelected()) {
activeChart = chart;
}
});
return activeChart;
};
</script>
<style scoped>
.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;
}
#app {
height: 100%;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
