下面小編就為大家?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è)變通的方法。如有更好的方法請(qǐng)留言哦謝謝。

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