Highcharts 轮播(Motion)插件

Highcharts 轮播插件 是用来实现图表数据轮播的插件,先来看几个例子:





更多例子:

使用方法

1. 需要引入的文件

// Highcharts 相关文件
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
// 插件文件
<script src="https://img.hcharts.cn/highcharts-plugins/motion.js"></script>

// Font awesome css 文件,用于展示播放按钮
<link rel="stylesheet" href="https://img.hcharts.cn/libs/font-awesome/css/font-awesome.min.css">

2. 配置轮播属性

通过 mation 执行轮播相关配置,其下的所有配置都是可选的

// ...
motion: {
    enabled: true, // 是否启用轮播,默认是  true
    labels: [  //   轮播时展示的标签
        2000, 2001, 2002, 2003, 2004, 2005,
        2006, 2007, 2008, 2009, 2010
    ],
    series: 0, // int 数组或 int,指定需要轮播的数据列下标,默认是 0 
    startIndex: 0 // 轮播开始的数据,即数据序列的下标,默认是最后一个数据
    axisLabel: 'year', // 轮播默认的文字标签,默认是 'year'
    autoPlay : true, // 是否自动播放,默认是 false 
    updateInterval: 10, // 轮播的速度,即轮播更新数据的间隔,单位是毫秒,默认是 10
    magnet: {           // 控制轮播进度条相关配置
        round: 'floor', // 进度条间隔取整函数,可以有 ceil / floor / round,默认是 'round'
        step: 0.02 // 进度条间隔,默认是 0.01
    },
    playIcon: "fa fa-play", //播放按钮图表的类名,同 fontAwesome 
    pauseIcon: "fa fa-pause" //暂停按钮图表的类名,同 fontAwesome 
},
// ...

3. 配置轮播数据

通过给每个数据点添加 sequence 数据可以指定每个数据点需要轮播的数据

// ...
series: [{
    name: 'Jane',
    data: [
        {
            y: 1,
            sequence: [1, 5, 2, 7, 7, 1, 6, 9, 2, 5, 1]
        }, {
            y: 3,
            sequence: [5, 5, 7, 7, 3, 8, 9, 9, 1, 7, 3]
        }
    ]
},
// ...

轮播的操作和控制

该插件目前支持如下几种操作轮播方式:

  • 通过点击 播放/暂停 按钮进行播放或暂停
  • 通过空格键来控制播放或暂停(需要保证轮播组件是聚焦或选中状态)
  • 通过拖动轮播进度条
  • 通过键盘左右键
  • 调用 chart.motion.play() 进行播放
  • 调用 chart.motion.pause() 进行暂停
  • 调用 chart.motion.reset() 进行重置
分享到评论