Javascript 带运动的海图热图

需要创建一个高运动图表，我已经做了一个小提琴来解释我已经做了什么。 但需要使工作的运动播放按钮不工作，运动将工作在点击按钮，它将改变框的颜色取决于随机值，运动栏将是时间帧

动议及连串呼吁：

    motion: {
    enabled: true,
    axisLabel: 'year',
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    series: [0],
     // The series which holds points to update
    updateInterval: 1,
    magnet: {
        type: 'both', // thumb / point / both
        round: 'floor', // ceil / floor / round
        smoothThumb: true, // defaults to true
        step: 0.01
    }
},
    series: [{
        name: 'Heat Map',
        borderWidth: 1,
        data: [[0,0,10],[1,0,5],[2,0,3]],
        }]

---

热图点的结构如下所示：

{
  x: Number
  y: Number
  value: Number
  ...
}

{ value: Number }

此外，对于运动插件，点需要

序列

属性，该属性是一组热图点-它可能是一个局部对象-如果要更新点的值（热图上的颜色），则序列中的点应如下所示：

{
  x: Number
  y: Number
  value: Number
  ...
}

{ value: Number }

系列示例：

series: [{
  name: 'Heat Map',
  borderWidth: 1,
  data: [{
    x: 0,
    y: 0,
    sequence: [{
      value: 10
    }, {
      value: Math.random() * 10
    }, {
      value: Math.random() * 10
    }]
  }, {
    x: 1,
    y: 0,
    sequence: [{
      value: 5
    }, {
      value: Math.random() * 5
    }, {
      value: Math.random() * 5
    }]
  }, {
    x: 2,
    y: 0,
    sequence: [{
      value: 3
    }, {
      value: Math.random() * 3
    }, {
      value: Math.random() * 3
    }]
  }]
}]

例如：