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]
        }
    ]
},
// ...