jquery - 如何使用 jQuery 创建类似倒计时的饼图？

Question

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

我很想添加我的编码尝试，只是我真的不知道。当谷歌搜索“jQuery 倒计时”、“饼图”等内容时，我只找到插件，我想自己编写代码。我什至不确定这是否应该使用 html5 画布、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