快捷導(dǎo)航

ichart.js繪制虛線、平均分虛線效果的實(shí)現(xiàn)代碼

更新時(shí)間：2016年05月05日 16:47:54 投稿：jingxian

下面小編就為大家?guī)硪黄猧chart.js繪制虛線、平均分虛線效果的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考

ichart.js繪制虛線、平均分虛線效果的實(shí)現(xiàn)代碼

var Data=new Array(); 
    Data[0] = { 
      labels : ["第一單元","第二單元","第三單元","第四單元","第五單元"], 
      datasets : [ 
        { 
          name : '優(yōu)秀率', 
          color:'#1dbcfe', 
          line_width:4, 
          value : [80,75,92,62,0] 
        } 
      ] 
    } 
    Data[1] = { 
      labels : ["第一單元","第二單元","第三單元","第四單元","第五單元"], 
      datasets : [ 
        { 
          name : '優(yōu)秀率', 
          color:'#1dbcfe', 
          line_width:4, 
          value : [50,11,62,77,90] 
        } 
      ] 
    } 
    Data[2] = { 
      labels : ["第一單元","第二單元","第三單元","第四單元","第五單元"], 
      datasets : [ 
        { 
          name : '優(yōu)秀率', 
          color:'#1dbcfe', 
          line_width:4, 
          value : [80,51,32,44,80] 
        } 
      ] 
    } 
     
    var _bodyWidth=$('body').width()-16; 
    $('.item').each(function(i){ 
      var _id=$(this).find('.canvas-wrap').attr('id'); 
      var chart = new iChart.LineBasic2D({ 
        render : _id, 
        data: Data[i].datasets, 
        align:'center', 
        border:0, 
        width : _bodyWidth*2, 
        height : _bodyWidth*1.2, 
        background_color:'#fafafa', 
        animation : true,//開啟過渡動(dòng)畫 
        animation_duration:600,//600ms完成動(dòng)畫 
         
        sub_option : { 
          smooth : true, 
          hollow:false, 
          hollow_inside:false, 
          point_size:16, 
          listeners : { 
            parseText : function(r, t) { 
              return t+'%'; 
            } 
          }, 
          label:{fontsize:24,color:'#333'}, 
        }, 
        coordinate:{ 
          width:_bodyWidth*1.6, 
          valid_width:_bodyWidth*1.4, 
          height:_bodyWidth*1.6*.5, 
          striped_factor : 0.18, 
          axis:{ 
            color:'#aaa', 
            width:[0,0,8,0] 
          }, 
          scale:[{ 
             position:'left',  
             start_scale:0, 
             end_scale:100, 
             scale_space:20, 
             scale_size:2, 
             scale_enable : false, 
             label : {color:'#999',fontsize:24}, 
             scale_color:'#999'
          },{ 
             position:'bottom', 
             label : {color:'#999',fontsize:24}, 
             scale_enable : false, 
             labels:Data[i].labels 
          }] 
        } 
         
      }); 
      /** 
       *自定義組件,畫平均線。 
       */
      chart.plugin(new iChart.Custom({ 
          drawFn:function(){ 
            /** 
             *計(jì)算平均值的高度(坐標(biāo)Y值) 
             */ 
             var _total=0; 
            $.each(Data[i].datasets[0].value,function(i,val){ 
              _total+=val; 
            }); 
            var avg = _total/Data[i].datasets[0].value.length,//計(jì)算出的平均分寫在這即可 
              coo = chart.getCoordinate(), 
              x = coo.get('originx'), 
              W = coo.width, 
              S = coo.getScale('left'), 
              H = coo.height, 
              h = (avg - S.start) * H / S.distance, 
              y = chart.y + H - h; 
            for(xi=x;xi<=(x+W);xi=xi+32){ 
              chart.target.line(xi,y,xi+16,y,2,'#fe941c'); 
            } 
            chart.target.textAlign('start') 
            .textBaseline('middle') 
            .textFont('500 20px Verdana') 
            .fillText('平均戰(zhàn)勝率'+avg+'%',x+W-100,y-20,false,'#fe941c'); 
          } 
      })); 
      chart.draw(); 
    });

以上代碼是繪制多個(gè)折線圖的js示例，以及在每個(gè)折線圖內(nèi)繪制平均分虛線的方法。

ichart.js是一個(gè)十分不錯(cuò)的圖標(biāo)繪制js，缺點(diǎn)是在移動(dòng)端需要先設(shè)置兩倍大小，再用css和js手動(dòng)縮小到正常范圍，以使其在屏幕上保持高清。

官網(wǎng)有繪制平均線的示例，但是沒有虛線的，而一般為了不混淆，平均線都是使用虛線繪制的。這里我只是循環(huán)繪制了n端直線，算是一個(gè)變通的方法。如有更好的方法請留言哦謝謝。

以上這篇ichart.js繪制虛線、平均分虛線效果的實(shí)現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: