下面小编就为大家带来一篇ichart.js绘制虚线、平均分虚线效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考

ichart.js绘制虚线、平均分虚线效果的实现代码

var Data=new Array(); 

    Data[0] = { 

      labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], 

      datasets : [ 

        { 

          name : '优秀率', 

          color:'#1dbcfe', 

          line_width:4, 

          value : [80,75,92,62,0] 

        } 

      ] 

    } 

    Data[1] = { 

      labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], 

      datasets : [ 

          name : '优秀率', 

          color:'#1dbcfe', 

          line_width:4, 

          value : [50,11,62,77,90] 

        } 

      ] 

    } 

    Data[2] = { 

      labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], 

      datasets : [ 

        { 

          name : '优秀率', 

          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('平均战胜率'+avg+'%',x+W-100,y-20,false,'#fe941c'); 

          } 

      })); 

      chart.draw(); 

    });

以上代码是绘制多个折线图的js示例，以及在每个折线图内绘制平均分虚线的方法。

ichart.js是一个十分不错的图标绘制js，缺点是在移动端需要先设置两倍大小，再用css和js手动缩小到正常范围，以使其在屏幕上保持高清。

官网有绘制平均线的示例，但是没有虚线的，而一般为了不混淆，平均线都是使用虚线绘制的。这里我只是循环绘制了n端直线，算是一个变通的方法。如有更好的方法请留言哦谢谢。

以上这篇ichart.js绘制虚线、平均分虚线效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考