带有Highcharts的动画图表介绍-控件新闻-慧都网

带有Highcharts的动画图表介绍

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

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

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

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
      }
    }
  },

就是这样，简单有效：).
动画是一种雄辩的解决方案，用于可视化数据并帮助观众获得更深刻的见解。

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