带有Highcharts的动画图表介绍

翻译|使用教程|编辑:杨鹏连|2021-03-01 16:42:10.900|阅读 32 次

概述:本教程将说明如何利用智能的Highchart选项创建交互式动画图表。

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

点击下载Highcharts最新试用版


本教程将说明如何利用智能的Highchart选项创建交互式动画图表。

动画图表可以提供强大有效的方法来吸引人们注意数据的某些方面。作为一次让过多的数据使观众不知所措的替代方法,动画使观众能够以中等速度深入了解数据。

下图显示了1980年至2020年北极海冰的范围:

上面的图表显示了6条不同的线;(四)灰线代表1980、1990、2000和2010年的数据;蓝色线代表2020年的最新测量值,红色线代表2012年的最低记录。

如果没有动画,图表可能会使观众不知所措,从而需要更多时间和认知处理来理解数据正在尝试的故事。当下。通过包含动画,观众可以在短时间内轻松地消化数据。通过连续显示数据,可以保持观众的兴趣。

利用图表动画来增强观众体验的优势很明显,因此让我们继续使用Highcharts创建动画交互式图表。
上面的演示是使用选项defer下的animation选项创建的。要启用,只需defer为需要动画的每个图表添加选项。请确保间隔行的渲染时间(1000毫秒),以避免同时或以错误的顺序渲染两个或多个序列:

series: [
    {
      showInLegend: false,
      animation: {
        defer: period
      }
    },
    {
      showInLegend: false,
      animation: {
        defer: period * 2
      }
    },
    ...
要获得每一行的进度时间效果,可以animation在下面的选项中添加一个设置值plotOptions:
  plotOptions: {
    series: {
      color: "#ABB2B9",
      marker: {
        enabled: false
      },
      label: {
        connectorAllowed: false
      },
      animation:{
        duration:1200
      }
    }
  },
就是这样,简单有效:).
动画是一种雄辩的解决方案,用于可视化数据并帮助观众获得更深刻的见解。

欢迎使用下面的评论部分与动画图表分享您的经验。


APS帮助提升企业生产效率,真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划,提高准时交货能力,提高产能和资源利用率

想要购买Highcharts正版授权,或了解更多产品信息请点击【咨询在线客服】


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:Highcharts

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat