jQuery_jqueryを使用した単純な棒グラフの作成例

この記事の例では、jQuery を使用して単純なヒストグラムを作成する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

HTML 部分:

コードをコピーします コードは次のとおりです。

CSS 部分:

コードをコピー

コードは次のとおりです:/*以下はヒストグラムのスタイルです*/ .histogram-container{position:relative;margin-left:60px;margin-top:10px;margin-bottom:25px;} .histogram-bg-line{border:#999 Solid;border-width:0 0px 1px 1px;border-right-color:#eee;overflow:hidden;width:99%;}

.histogram-bg-line ul{overflow:hidden;border:#eee Solid;border-width:1px 0 0 0;clear:both;}

.histogram-bg-line li{float:left;overflow:hidden;background:#fff;}
.histogram-bg-line li div{border-right:1px #eee Solid;}
.histogram-content{位置:絶対;左:0px;上:0;幅:99%;高さ:100%;}
.histogram-content ul{高さ:100%;}
.histogram-content li{float:left;height:100%;text-align:center;position:relative;}
.histogram-box{position:relative;display:inline-block;height:100%;width:20px;}
.histogram-content li a{position:absolute;bottom:0;right:0;display:block;width:20px;font-size:0;line-height:0;}
.histogram-content li .histogram-name{position:absolute;bottom:-20px;left:0px;white-space:nowrap;display:inline-block;width:100%;font-size:12px;overflow:hidden; }
.histogram-y{position:absolute;left:-60px;top:-10px;font:12px/1.8 verdana,arial;}
.histogram-y li{text-align:right;width:55px;padding-right:5px;color:#333;}
.histogram-bg-line li div,.histogram-y li{height:30px;/*パーセントと線が揃うようにセルの高さとパーセントの高さを制御します*/}



Js パート:

コードをコピー

コードは次のとおりです:

$(関数(){
var dataArr={
"データ":[
{"id":1,"name":"Baidu","per":"10"},
{"id":2,"name":"Tencent","per":"20"},
{"id":3,"name":"シーナ","per":"10"},
{"id":4,"name":"NetEase","per":"44"},
{"id":5,"name":"ソフ","per":"50"},
{"id":5,"name":"コハゼ","per":"69"},
{"id":5,"name":"人人ネット","per":"72"},
{"id":5,"name":"iQiyi","per":"88"},
{"id":5,"name":"Qihoo 360","per":"92"},
{"id":5,"name":"Alibaba","per":"15"},
{"id":5,"name":"Alibaba","per":"10"}
]]
};
新しいヒストグラム().init(dataArr.data); });

関数ヒストグラム(){
var コントロール ={}; var bgColor=new Array("#666666","#21AA7C","#2277BB","#dc7644","#BBAA22","#AA22AA","#338800","#1099EE","#ffcc33" ,"#ED3810"); This.init=function(data,y){
setControls();
buildHtml(data,y); }
関数 setControls(){
コントロール.histogramContainer=$("#ヒストグラムコンテナ"); 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"); }
関数 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");
                                                                            for(var a=0;a perArr[a]=parseInt(data[a]['per']);                                                                                                               maxNum=String(perArr.max()); If(maxNum.length>2){
var x=parseInt(maxNum.substr(maxNum.length-2,1)) 1;
maxTotal=Math.floor(parseInt(maxNum/100))*100 x*10; }その他{
maxTotal=Math.floor(parseInt(maxNum/10))*10 10;                                                                                                                                                                                           //y軸部分
If(y=="%"){
yStr ='

100%

80%

60%

40%

;20%

0%

'; }その他{
var avg=maxTotal/5;
for(i=5;i>=0;i--){
                yStr = '

' avg*i '

'; 
            }
        }
         
        //柱状条部分
        for(var i=0;i             var per=Math.floor(parseInt(data[i]['per'])/maxTotal*100); 
            var n=Math.floor(parseInt(per)/10); 
            contentStr ='

'; 
            contentStr =''データ[i]['名前'] ''; 
            contentStr = '

'; 
            bgLineStr ='

'; 
        }
         
        //背景方格部分
        for(var j=0;j             bgLineAll ='

' bgLineStr '

'; 
        }
        bgLineAll='

' bgLineAll '

'; 
        contentStr='

' contentStr '

'; 
        yStr='

' yStr '

'; 
        controls.histogramContainer.html(bgLineAll contentStr yStr); 
        controls.histogramContainer.css("height",controls.histogramContainer.height() "px");//主是解决IE6中の问题
    }
}
Array.prototype.max = function(){//最大值
 return Math.max.apply({},this)
}

ここで説明されている大規模な jQuery プログラムの設計が役立つことを望みます。