animationLine(elapsed) {
  let duration = 700;
  let t = Math.min(1, elapsed / duration); // compute how far through the animation we are (0 to 1)

  // Clear Canvas
  this.ctx.clearRect(0, 0, this.conWidth, this.conHeight);

  /*-------------------------
    甜甜圈
  -------------------------*/
  this.ctx.save();
  this.pie.forEach((e, i) => {
    // 開始繪製
    this.ctx.beginPath();
    this.ctx.arc(
      this.conWidth / 2,
      this.conHeight / 2,
      this.radius,
      e.startAngle,
      e.startAngle + (e.endAngle - e.startAngle) * t
    );
    // 邊框色
    this.ctx.lineWidth = this.chartOuterRadius - this.chartInnerRadius;
    this.ctx.strokeStyle = e.color;
    this.ctx.globalAlpha = t;
    this.ctx.stroke();
  });

  /*-------------------------
    甜甜圈文字
  -------------------------*/
  this.pie.forEach((e, i) => {
    let theta = e.startAngle + (e.endAngle - e.startAngle) / 2;
    let x = this.radius * Math.cos(theta);
    let y = this.radius * Math.sin(theta);

    // 開始繪製
    this.ctx.textAlign = "center";
    this.ctx.textBaseline = "middle";
    this.ctx.font = "16px sans-serif";
    this.ctx.fillStyle = "#fff";
    this.ctx.fillText(
      e.percentage,
      this.conWidth / 2 + x,
      this.conHeight / 2 + y
    );
  });
  this.ctx.restore();

  // if this animation is over
  if (t === 1) {
    // stop this timer since we are done animating.
    this.timer.stop();
  }
},