我正在尝试制作条形图，类似于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/
是否有人可以编辑这个小提琴来解决这个问题？
答案 0 :(得分：8)
查看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的高度
答案 1 :(得分：0)