请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Lenka.Guo 讲师达人认证 悬赏达人认证
超级版主   /  发表于:2022-2-15 09:47  /   查看:529  /  回复:0
本帖最后由 KearneyKang 于 2022-2-16 14:22 编辑

先来看看效果图 图表动画.mp4 (1.81 MB, 下载次数: 10)


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

图表动画设置
加载动画
加载动画在图表第一次加载时,或图表被强制刷新时发生。要在图表中启用加载动画,请使用以下代码:
  1. animation: {
  2.                     loadChart: {
  3.                         enabled: true
  4.                     }
  5.                 }              
复制代码

悬浮动画
悬停动画可以缩放数据点。当用户将鼠标悬停在数据上时,数据点会被放大,当用户将鼠标从数据点上移开时,会缩回到原来的大小。根据设计图表时在图表上设置的工具提示模板,悬停标签也可以在数据点上显示出来:
  1. animation: {
  2.                     hoverChart: {
  3.                         enabled: true
  4.                     },
  5.                 }               
复制代码

表格动画设置
悬浮动画:
  1. animation: {
  2.                     hoverTable: {
  3.                         enabled: true,
  4.                         backgroundColor: 'LightGray',
  5.                         textColor: 'DarkGray'
  6.                     }
  7.                 }               
复制代码
完整代码示例:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <meta name="theme-color" content="#000000">
  8.     <title>JS Viewer</title>
  9.     <link href="jsViewer.min.css" rel="stylesheet">
  10.     <link href="jsViewer.chart.min.css" rel="stylesheet" />//引用CSS文件
  11.     <link href="index.css" rel="stylesheet">
  12. </head>
  13. <body onload="loadViewer()">
  14.     <div style="width: 100%">
  15.         <div id="viewerContainer"></div>
  16.     </div>
  17.     <script type="text/javascript" src="jsViewer.min.js"></script>
  18.     <script type="text/javascript" src="jsViewer.chart.min.js"></script>//引用JS文件
  19.     <script type="text/javascript">
  20.         let viewer;
  21.         function loadViewer() {
  22.             viewer = GrapeCity.ActiveReports.JSViewer.create({
  23.                 element: '#viewerContainer',
  24.                 displayMode: "Continuous",
  25.                 pageView: {
  26.                     horizontalAlignment: "center",
  27.                     viewMode: "standard" // default : noPaper
  28.                 },
  29.                 animation: {
  30.                     hoverTable: {
  31.                         enabled: true,
  32.                         backgroundColor: 'LightGray',
  33.                         textColor: 'DarkGray'
  34.                     },
  35.                     loadChart: {
  36.                         enabled: true
  37.                     },
  38.                     hoverChart: {
  39.                         enabled: true
  40.                     }
  41.                 }
  42.             });
  43.            
  44.             console.dir(viewer)
  45.             viewer.openReport("DemoReport.rdlx");
  46.         }
  47.     </script>
  48. </body>
  49. </html>

  50.                
复制代码
注意:绘图规则在有动画的图表上不起作用。如果你想在图表上应用绘图规则,你必须禁用动画属性。


0 个回复

您需要登录后才可以回帖 登录 | 立即注册