如何制作像Github这样的52周参与条形图？

Question

我正在尝试制作条形图,类似于Github如何显示有多少提交或有多少人正在观看存储库,例如https://github.com/popular/watched.

有谁知道他们用来制作它的库？

更新我想尽可能重新打开这个问题.重新调查这个,下面的解决方案,虽然他们自己很棒,似乎有点过于涉及我正在寻找的东西.

我已经转而使用这个漂亮的Nettuts教程,该教程绘制了一个条形图,但我很难适应它来绘制多个条形图.http://net.tutsplus.com/tutorials/javascript-ajax/fun-with-canvas-create-a-jquery-graph-plugin/

我已经做了一个小提琴,我手动添加代码来处理第二个图形,但我相信我需要一些for循环来使这个工作适用于可变数量的图形.这是小提琴:http://jsfiddle.net/trpeters1/zHH76/

也许有人能够编辑这个小提琴来解决这个问题？

Answer 1

考虑d3.js.有几个例子说明如何在JavaScript中使用数组并将其转换为类似的图形.

这是一个(更高级的)示例:http://mbostock.github.com/d3/ex/population.html
这是另一个更接近您想要的示例:http://mbostock.github.com/d3 /tutorial/bar-2.html

编辑

Git Hub用于创建图形的实际代码如下所示:

GitHub.ParticipationGraph = (function(){
  function b(target){
    this.el = target;
    this.onSuccess = $.proxy(this.onSuccess, this);
    this.canvas = this.el.getContext("2d");
    this.refresh();
  }

  b.prototype.barWidth = 7;

  b.prototype.barMaxHeight = 20;

  b.prototype.getUrl = function(){
    return $(this.el).data("source");
  };

  b.prototype.setData = function(data){
    this.data = data;
    if (data == null || data.all == null || data.owner == null) {
      this.data = null;
    }
    this.scale = this.getScale(this.data);
  };

  b.prototype.getScale = function(data){
    var mx, i;
    if (data == null) return;
    mx = data.all[0];
    for(i = 0; i < data.all.length; i++) {
      if (data.all[i] > mx) {
        mx = data.all[i];
      }
    }
    return mx >= this.barMaxHeight ? (this.barMaxHeight-.1)/mx : 1;
  };

  b.prototype.refresh = function(){
    $.ajax({
      url: this.getUrl(),
      dataType: "json",
      success: this.onSuccess
    });
  };

  b.prototype.onSuccess = function(data){
    this.setData(data);
    this.draw();
  };

  b.prototype.draw = function(){
    if (this.data == null) return;
    this.drawCommits(this.data.all, "#cacaca");
    this.drawCommits(this.data.owner, "#336699");
  };

  b.prototype.drawCommits = function(data, color){
    var i, width, height, x, y;
    for (i = 0; i < data.length; i++) {
      width = this.barWidth;
      height = data[i] * this.scale;
      x = i * (this.barWidth + 1);
      y = this.barMaxHeight - height;
      this.canvas.fillStyle = color;
      this.canvas.fillRect(x, y, width, height);
    }
  };

  return b;
})();

基本上,它们调用data-source位于画布上的标记,它返回一些表示工作/参与/观察量(或者他们正在计算的度量标准)的JSON,然后它们遍历每个返回的值并this.canvas.fillRect使用预定义的宽度调用((Screensize.width/52) - (paddingLeft + paddingRight))并返回JSON的高度