jQuery制作简单柱状图实例

        {“id”:5,”name”:”搜狐”,”per”:”50″}, 
        {“id”:5,”name”:”小虾虎鱼”,”per”:”69″}, 
        {“id”:5,”name”:”人人网”,”per”:”72″}, 
        {“id”:5,”name”:”爱奇艺”,”per”:”88″}, 
        {“id”:5,”name”:”奇虎360″,”per”:”92″}, 
        {“id”:5,”name”:”阿里巴巴”,”per”:”15″}, 
        {“id”:5,”name”:”阿里巴巴”,”per”:”10″} 
    ] 
}; 
new histogram().init(dataArr.data); 
}); 
 
function histogram(){ 
    var controls={}; 
    var bgColor=new Array(“#666666″,”#21AA7C”,”#2277BB”,”#dc7644″,”#BBAA22″,”#AA22AA”,”#338800″,”#1099EE”,”#ffcc33″,”#ED3810″); 
    this.init=function(data,y){ 
        setControls(); 
        buildHtml(data,y); 
    } 
    function setControls(){ 
        controls.histogramContainer=$(“#histogram-container”); 
        controls.histogramBgLineUL=controls.histogramContainer.children(“div.histogram-bg-line”); 
        controls.histogramContentUL=controls.histogramContainer.children(“div.histogram-content”); 
        controls.histogramY=controls.histogramContainer.children(“div.histogram-y”); 
    } 
    function buildHtml(data,y){ 
        var len=data.length,perArr=new Array(),maxNum,maxTotal,yStr=”; 
        var contentStr=”,bgLineStr=”,bgLineAll=”; 
        var widthPer=Math.floor(100/len); 
        minWidth=len*21+60; 
        controls.histogramContainer.css(“min-width”,minWidth+”px”);