ActiveReports 16新特性-图表和表格，支持动画效果啦

收藏

本帖最后由 KearneyKang 于 2022-2-16 14:22 编辑

先来看看效果图

图表动画.mp4 (1.81 MB, 下载次数: 10)

是不是让我们的报表更加灵动了？
那我们快来学习下，如何为报表设置这一酷炫的功能呢？操作步骤非常简单，只需要打开开关：
JS Viewer（和WebViewer控件）为用户提供了向图表和表格添加动画的API。你可以在图表加载时以及用户在图表或表格上悬停时启用图表的动画功能。

图表动画设置：
加载动画
加载动画在图表第一次加载时，或图表被强制刷新时发生。要在图表中启用加载动画，请使用以下代码：

animation: {
loadChart: {
enabled: true
}
}

复制代码

悬浮动画
悬停动画可以缩放数据点。当用户将鼠标悬停在数据上时，数据点会被放大，当用户将鼠标从数据点上移开时，会缩回到原来的大小。根据设计图表时在图表上设置的工具提示模板，悬停标签也可以在数据点上显示出来：

animation: {
hoverChart: {
enabled: true
},
}

复制代码

表格动画设置
悬浮动画：

animation: {
hoverTable: {
enabled: true,
backgroundColor: 'LightGray',
textColor: 'DarkGray'
}
}

复制代码

完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>JS Viewer</title>
<link href="jsViewer.min.css" rel="stylesheet">
<link href="jsViewer.chart.min.css" rel="stylesheet" />//引用CSS文件
<link href="index.css" rel="stylesheet">
</head>
<body onload="loadViewer()">
<div style="width: 100%">
<div id="viewerContainer"></div>
</div>
<script type="text/javascript" src="jsViewer.min.js"></script>
<script type="text/javascript" src="jsViewer.chart.min.js"></script>//引用JS文件
<script type="text/javascript">
let viewer;
function loadViewer() {
viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer',
displayMode: "Continuous",
pageView: {
horizontalAlignment: "center",
viewMode: "standard" // default : noPaper
},
animation: {
hoverTable: {
enabled: true,
backgroundColor: 'LightGray',
textColor: 'DarkGray'
},
loadChart: {
enabled: true
},
hoverChart: {
enabled: true
}
}
});
console.dir(viewer)
viewer.openReport("DemoReport.rdlx");
}
</script>
</body>
</html>

复制代码

注意：绘图规则在有动画的图表上不起作用。如果你想在图表上应用绘图规则，你必须禁用动画属性。

		自动登录	找回密码
密码			立即注册

[ActiveReports] ActiveReports 16新特性-图表和表格，支持动画效果啦

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄