javascript - 如何像 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/

我做了一个 fiddle ，在其中我手动添加了代码来处理第二张图，但我相信我需要一些 for 循环来使这项工作适用于可变数量的图。这是 fiddle :http://jsfiddle.net/trpeters1/zHH76/

有人可以编辑这个 fiddle 来解决这个问题吗？

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;
})();

基本上，他们调用位于 Canvas 上的 data-source 标签，该标签返回一些 JSON 表示工作/参与/观看(或他们正在计算的任何指标)的数量，然后他们遍历每个返回值并使用预定义的宽度 ((Screensize.width/52) - (paddingLeft + paddingRight)) 和高度调用 this.canvas.fillRect JSON返回