添加悬停动画和样式

通常，当在图表中绘制大量数据时，数据标签会使整个图表混乱，并使视图变得毫无意义。 SpreadJS提供了对添加悬停动画和悬停样式的支持，以增强与图表交互时的用户体验。

添加悬停动画

在使用SpreadJS时，添加悬停动画可以使用户与图表中的数据点进行交互。 此功能可帮助用户浏览数据并将基本图表转换为响应图表。 此外，它增强了图表的可读性，同时使表单对用户更具吸引力。

悬停动画在以下情况下非常有用：

• 用户有兴趣了解数据点的准确值。
• 用户希望在分析图表时使用鼠标悬停显示其他信息以获得有价值的结果。

以下截图描绘了带有悬停动画的图表。 用户只需在图表上移动鼠标指针，即可在表单中使用鼠标悬停动画效果。

useAnimation() 方法可用于将悬停动画添加到图表。 除StockHLC图表外，所有图表类型均支持悬停动画。 应用悬停动画效果后，图表中的数据点会放大，并显示有关绘制的数据点的其他详细信息。

应用悬停样式

使用SpreadJS时，用户可以将悬停样式应用于图表 通过 使用 hoverStyle() 方法。 此功能使用户可以突出显示图表中的不同数据点。 此外，它还可以帮助分析师定制当用户将鼠标悬停在图表中的数据点上时动态显示的数据外观。

所有图表类型均支持悬停样式。 用户可以在将悬停样式应用于图表时修改颜色，透明度，线宽，线颜色，线透明度，线类型，符号颜色，符号透明度，符号线宽度，符号线颜色，符号线透明度和符号线类型。

注意: 悬停样式的优先级高于为数据点设置的样式。

以下截图描述了应用于图表的悬停样式。

代码

请参考以下示例代码，以便在可视化表单中的数据时向图表添加悬停动画和悬停样式。

<script type="text/javascript">
var chart_columnClustered, chart_columnStacked, chart_columnStacked100, sheet;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// 准备图表数据
activeSheet.setValue(0, 1, "Y-2015");
activeSheet.setValue(0, 2, "Y-2016");
activeSheet.setValue(0, 3, "Y-2017");
activeSheet.setValue(0, 4, "Y-2018");
activeSheet.setValue(0, 5, "Y-2019");
activeSheet.setValue(1, 0, "Gradlco");
activeSheet.setValue(2, 0, "Saagiate");
activeSheet.setValue(3, 0, "Inferno");
activeSheet.setColumnWidth(0, 120);
for (var r = 1; r <= 3; r++)
{
for (var c = 1; c <= 5; c++)
{
activeSheet.setValue(r, c, parseInt(Math.random() * 5000));
}
}
// 使用HoverStyle配置折线图
var lineMarkerChart = activeSheet.charts.add('lineMarkerChart', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 20, 100, 380, 330, "A1:F4", GC.Spread.Sheets.Charts.RowCol.columns);
lineMarkerChart.title({ text: "HoverStyle with markers" });
var seriesItem = lineMarkerChart.series().get(0);
seriesItem.symbol.size = 20;
lineMarkerChart.series().set(0, seriesItem);
var hoverStyle = lineMarkerChart.hoverStyle();

// 将applyHoverStyle设置为true
hoverStyle.applyHoverStyle = true;
hoverStyle.color = "orange";
hoverStyle.transparency = 0.1;
hoverStyle.borderStyle.transparency = 0.1;
hoverStyle.borderStyle.color = '#FF0000';
hoverStyle.borderStyle.width = 3;
hoverStyle.borderStyle.dashStyle = GC.Spread.Sheets.Charts.LineType.lgDash;
hoverStyle.symbolStyle.color = "yellow";
hoverStyle.symbolStyle.transparency = 0.1;
hoverStyle.symbolStyle.borderStyle.transparency = 0.1;
hoverStyle.symbolStyle.borderStyle.color = 'rgb(0, 0, 255)';
hoverStyle.symbolStyle.borderStyle.width = 9;
hoverStyle.symbolStyle.borderStyle.dashStyle = GC.Spread.Sheets.Charts.LineType.lgDash;
lineMarkerChart.hoverStyle(hoverStyle);
// 使用悬停动画配置饼图
var pieChart = activeSheet.charts.add('pieChart', GC.Spread.Sheets.Charts.ChartType.pie, 420, 100, 380, 330, 'A1:F4');
pieChart.title({ text: "HoverStyle with Animation" });
pieChart.useAnimation(true);
var hoverStyle1 = pieChart.hoverStyle();

// 将applyHoverStyle设置为true
hoverStyle1.applyHoverStyle = true;
hoverStyle1.color = "orange";
hoverStyle1.transparency = 0.6;
hoverStyle1.borderStyle.transparency = 0.1;
hoverStyle1.borderStyle.color = '#FF0000';
hoverStyle1.borderStyle.width = 9;
hoverStyle1.borderStyle.dashStyle = GC.Spread.Sheets.Charts.LineType.lgDash;
pieChart.hoverStyle(hoverStyle1);
activeSheet.resumePaint();
};
</script>