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

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绘制虚线、平均分虚线效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。