如何使用jQuery创建像倒计时一样的饼图？

Question

我正在尝试编写类似这样的代码 -

我想加入我的编码尝试，只是我真的没有线索。当谷歌搜索“jQuery倒计时”，“饼图”等东西时，我只找到插件，我想自己编码。我甚至不确定是否应该使用html5 canvas，jQuery或两者来完成..

我的第一步应该是什么？

Answer 1

绘制圆形的“馅饼”部分是一项相当简单的任务。

例如：

ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.moveTo(50,50);
ctx.arc(50,50,50, sta, sta + 2*Math.PI*pct);
ctx.fill();

上面的代码将绘制一个半径为50像素的圆弧。第四和第五参数确定弧开始和结束的位置。在您的情况下，您想要：

var sta = -Math.PI/2; // this is -90 degrees (or "up")

变量pct是要填充的圆的百分比。

你问题的真正目标是计时器。我创建了一个简单的Timer类，它的输出非常灵活：

function Timer(duration /* in ms */ , props) {
    this.ontick = props && typeof props.ontick === "function" ? props.ontick : function() {};
    this.onend = props && typeof props.onend === "function" ? props.onend : function() {};
    this.interval = props && typeof props.interval === "number" ? props.interval : 1000 / 10;
    this.elapsed = 0;

    var running = false,
      start, end, self = this;

    this.start = function() {
      if (running) return this;

      start = new Date().getTime();
      end = start + duration;
      tick();
      running = true;

      return this;
    };

    function tick() {
      var now = new Date().getTime();
      self.ontick.call(self);
      self.elapsed = now - start;

      if (now < end) setTimeout(tick, self.interval);
      else self.onend.call(self);
    }
  }

Timer类的基本用法可能是这样的：

var timer = new Timer(10 * 1000, {
    ontick:function(){
        console.log(this.elapsed);
    },
    onend:function(){
        console.log('all done');
    }
}).start();

这个Timer实现的好处在于，它没有与计数停机时间无关的逻辑混乱，所以它非常可重用。

  

我已在此处创建了您想要的输出示例：http://jsfiddle.net/9jZsb/6/
 您可以看到我自己正在创建动画，但将其他库合并到此解决方案中以实现类似效果应该是微不足道的。

Answer 2

查看highcharts绘图库。它们支持动画渲染图表。他们也做饼图。 http://www.highcharts.com/demo/dynamic-update