ichart.js implementation code for drawing dotted lines and averaging dotted line effects_javascript skills

Ichart.js implementation code for drawing dotted lines and averaging dotted line effects

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(); 
    });

The above code is a js example of drawing multiple line charts, and a method of drawing an average dotted line within each line chart.

ichart.js is a very good icon drawing js. The disadvantage is that on the mobile side, you need to set the size twice first, and then use css and js to manually reduce it to the normal range to keep it high-definition on the screen.

The official website has an example of drawing an average line, but there is no dotted line. Generally, in order to avoid confusion, the average line is drawn with a dotted line. Here I just draw the n-terminal straight line in a loop, which is a workaround. If you have a better method, please leave a message. Thank you.

The above implementation code for ichart.js to draw dotted lines and average dotted line effects is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.