jQuery.circliful.min.jsリングレポートの作成

プロジェクトやファイルではレポートでデータを表示し、観賞性と実用性が高いため、多くのプロジェクトでコントラスト型のデータについて、リングレポートを採用するのは良い方法です.wordにレポートを追加するのは簡単ですか?それとも簡単ですか?いろいろなタイプのテンプレートテンプレートテンプレートですが、コードでリングレポート付きのページを書けばいいですか?これも実は簡単な方法です.canvesは便利な選択です.現段階ではcss 3+canvesを用いる.あるいはcss 3+jqueryでリングレポートをよく作ることができます.以下のようにします.css+jQuery方式:
bodyセクション:

  

        

            

            

             
70%
        
        すぐ け る
  

css部分：

.coupon_right{
    float: right;
    position: relative;
    width:5em;
    text-align: center;
    margin:0.5em 0 ;
}
.coupon_right div{
    margin: 0;padding: 0;
}
.coupon_right_a1{
    margin-top: 5.5em;
    width: 5em;
    text-align: center;
    height: 1.5em;
    display: block;
    color: #ffffff;
    background: #4b9dff;
    -moz-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
    -webkit-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
    box-shadow:0.1em 0.1em 0.1em #e6f2ff;
    border-radius: 1em;
    font-size: 0.9em;
    
}
.coupon_right_a1:visited,.coupon_right_a1:hover{
    color: #ffffff;
}
.coupon_right_a1:active{
    background: rgba(75, 157, 255, 0.8);
    -moz-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
    -webkit-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
    box-shadow:0.1em 0.1em 0.1em #e6f2ff;
}
.cpCircle {
    width: 4.4em;
    height:  4.4em;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    background: #4b9dff;
    -moz-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
    -webkit-box-shadow:0.1em 0.1em 0.1em #e6f2ff;
    box-shadow:0.1em 0.1em 0.1em #e6f2ff;
}
.cpie_left, .cpie_right {
    width: 4.4em;
    height:  4.4em;
    position: absolute;
    overflow: hidden;
}
.clefttext, .crighttext {
    width:4.4em;
    height:4.4em;
    background:#e6f2ff;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
}
.cpie_right, .crighttext {
    clip:rect(0,auto,auto,2.23em);
}
.cpie_left, .clefttext {
    clip:rect(0,2.23em,auto,0);
}
.cp_mask {
    width: 3.8em;
    height:  3.8em;
    border-radius: 50%;
    left:0.3em;
    top: 0.3em;
    background: #ffffff;
    position: absolute;
    text-align: center;
    line-height:3.8em;
    font-size: 1em;
    font-weight: bold;
    color: #4b9dff;
}

jsセクション:

    function addPercent(i,num){

        if(num>100)return;
        num=num*3.6;
        if(num<=180){
            $(".circle").eq(i).find(".righttext").css("transform","rotate(" + num + "deg)");
        }else{
            $(".circle").eq(i).find(".righttext").css("transform","rotate(180deg)");
            $(".circle").eq(i).find(".lefttext").css("transform","rotate(" + (num - 180) + "deg)");
        }
    }
    var i=0;
    $(".circle").each(function() {
        var num = $(this).find("span").html();

        addPercent(i,num);
        i++;
    });

    ， css+jquery ， canves ；

次はプラグインjqueryです.circliful.js方式でリングレポートを実現する.cssセクション:

bodyセクション:

     

         
     
     

     すぐ け る

js部分：

for(var i=0;i

比較的に、プラグインで表示されているリングレポートの方が使いやすいです.バグは調整しにくいですが、スタイルがバグの位置を見つけることができます.適合するのはもっと便利ですが、css+js方式のレポートはもっと簡潔ですが、使用するといくつかのバグの適合状況が任意に入らず、周辺の多くのエッジ線がどのように削除するかが見つかりません.