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

    下面小編就為大家?guī)硪黄猧chart.js繪制虛線、平均分虛線效果的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考
    ichart.js繪制虛線、平均分虛線效果的實現(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,//開啟過渡動畫 
            animation_duration:600,//600ms完成動畫 
            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(){ 
                /** 
                 *計算平均值的高度(坐標Y值) 
                 */
                 var _total=0; 
                $.each(Data[i].datasets[0].value,function(i,val){ 
                  _total+=val; 
                }); 
                var avg = _total/Data[i].datasets[0].value.length,//計算出的平均分寫在這即可 
                  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(); 
        });
    以上代碼是繪制多個折線圖的js示例，以及在每個折線圖內(nèi)繪制平均分虛線的方法。
    ichart.js是一個十分不錯的圖標繪制js，缺點是在移動端需要先設置兩倍大小，再用css和js手動縮小到正常范圍，以使其在屏幕上保持高清。
    官網(wǎng)有繪制平均線的示例，但是沒有虛線的，而一般為了不混淆，平均線都是使用虛線繪制的。這里我只是循環(huán)繪制了n端直線，算是一個變通的方法。如有更好的方法請留言哦謝謝。
    以上這篇ichart.js繪制虛線、平均分虛線效果的實現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考