使用动画来增强仪表板的可读性

Dundas BI特性和功能

动画不仅仅是花瓶

仪表板是一种很好的方式来直观地表示您的数据，以便跟踪、分析和显示关键性能指标(kpi)。它们允许您监控业务、部门或流程的表现，并据此做出明智的决策。通常，一个设计良好的仪表板将在正确的布局中放置正确的指标集，以及趋势、上下文、交互和突出显示，以帮助消费者快速确定指标的执行情况。换句话说，仪表板应该易于阅读。

增强仪表板可读性的方法之一是使用动画。除了使仪表板在视觉上吸引人(这可以说是更高用户采用率的关键因素)，动画还允许您:

  • 容易将注意力吸引到仪表板的特定区域/部分
  • 帮助您在与数据交互时理解数据更改
  • 显示比仪表板的画布允许您使用静态内容显示的内容更多的内容。

需要强调的是，虽然大多数用户认为动画是一个很酷的“哇”因素，但它背后有很多科学，如果操作得当，它可以真正提高用户理解数据的能力。动画也可以称为数据转换。Dundas BI使用简单的配置提供了许多开箱即用的功能。

数据转换并不是Dundas BI中唯一可以设置的动画类型。Dundas BI最新的网页标准设计(HTML5, CSS3和JavaScript)允许您动画仪表板的组件，如图像或完整的视觉效果(而不是只是视觉效果中的数据)。这些动画可以使用在仪表板上每个元素的内置脚本操作中应用的标准JQuery方法来完成。


动画的价值

我们将探索如何在仪表板上使用动画来增强它，通过将用户的注意力吸引到正确的数据上。我们将接触到上面提到的动画的优点，通过使用我们的业务仪表板作为参考:

乍一看，您会发现这是一个为呼叫中心提供运营指标的标准仪表板。它也是一个实时仪表盘，每60秒更新一次，返回新的结果。但是，您会注意到有两个部分以不同的间隔变化。第一个是显示前5名座席的表格，另一个是每次有来电时震动的电话图像。

想象一下这个仪表盘被安装在呼叫中心周围的大屏幕上。每当手机震动时，经理们就能注意到活动水平;例如，如果电话摇晃得很厉害，他们甚至不需要阅读实际号码就能知道呼叫中心有多忙。但是，除了感觉上的忙碌之外，震动的电话还提醒代理人需要及时处理他们的电话。

至于表格，这种视觉设计是为了创造一个积极的、竞争性的环境，并激励代理。由于此仪表板上的空间有限，一个巧妙的渐隐动画有助于向用户指示表在月和日级别之间发生变化。这最终在仪表板上节省了大量宝贵的空间。

这些动画效果已经使用下面将要讨论的jQuery方法放置在仪表板上。


如何在Dundas BI中实现JQuery动画

Dundas BI提供了使用属性面板下仪表板上每个控件可用的操作概念来执行JavaScript和jQuery的能力。仪表板上的各种控件之间可用的操作类型不同。可用的典型操作包括单击、悬停和双击。但是，有许多操作是特定于特定控件的，例如下拉列表上的“已更改的选择”。

下图显示了图表可视化可用的操作。

要使用常用的jQuery方法在控件上执行动画或效果，首先选择将触发它的操作类型。接下来，您可以在该操作上实现该方法。例如，如果你想在点击按钮时显示/隐藏一个图表，那么转到属性选项卡下按钮控件的单击动作，并使用JQueryfadeToggle ()方法。

  1. 请注意操作将发生在其上的控件的脚本名称，以及它应该影响的控件的脚本名称。在此例中，图表的脚本名称为financeChart而按钮的脚本名称为showhideButton。
  2. 添加脚本的行动它将执行jQuery。类的Click操作中添加showhideButton


3.在脚本编辑器中添加jQuery并构建。

$ (financeChart.container) .fadeToggle ();

4.结果如下所示:

其他实现示例

淡入/淡出动画:落实上表效果:

这个方法的实现是使用定时器控制在仪表板上使用渐显()而且渐隐()方法。在计时器的“计时器间隔滴答”动作中，下面的脚本查找topAgentsLabel控制并在每月之间切换(topAgentsMonthly)和日常(topAgentsToday)每次计时器滴答响的时候。

如果(topAgentsLabel。labelText == "Today")

｛

美元(topAgentsToday.container)。fadeOut(1000, function() {

$ (topAgentsMonthly.container) .fadeIn (1000);

topAgentsLabel。labelText = "Monthly";

})；

｝

其他的

｛

美元(topAgentsMonthly.container)。fadeOut(1000, function() {

$ (topAgentsToday.container) .fadeIn (1000);

topAgentsLabel。labelText = "今天";

})；

｝

注意，与其使用渐显()而且渐隐()方法，也可以使用slideUp (), slideDown (),effect.fold effect.puff(),()。


振动动画:在上面提到的手机图像上实现振动效果。

每当队列中有新的入局呼叫时，电话图标就会震动。注意，这里的结果提供了与内置的类似的效果表格单元格值变化动画配置，但不是在表格单元格文本上而是在图像上。

振动效果是使用“动摇”数据标签的数据更改操作中的效果，显示入站调用的总数。每次调用的次数改变，图像(phoneImage)振动:

美元(phoneImage.container)。效果("shake"，{次数:4，距离:5});

而不是使用摇,你可以使用反弹,突出而且有规律地跳动以及对图像的影响。


结论

从上面的用例中可以看出，可以利用仪表板上的动画来增强用户体验。上面提到的例子只是你可以使用各种jQuery方法和效果实现的许多例子中的一小部分——要了解完整的jQuery效果库，请参见https://www.w3schools.com/jquery/jquery_ref_effects.asp

现在轮到你了——你会在你的仪表板上添加什么有用的动画?

打印