Code d'implémentation ichart.js pour dessiner des lignes pointillées et faire la moyenne des compétences d'effets de ligne pointillée_javascript

Code d'implémentation Ichart.js pour dessiner des lignes pointillées et faire la moyenne des effets de lignes pointillées

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

Le code ci-dessus est un exemple js de dessin de plusieurs graphiques linéaires et une méthode pour tracer une ligne pointillée moyenne dans chaque graphique linéaire.

ichart.js est un très bon dessin d'icônes js. L'inconvénient est que du côté mobile, vous devez d'abord définir la taille deux fois, puis utiliser css et js pour la réduire manuellement à la plage normale afin de la maintenir élevée. -définition sur l'écran.

Le site officiel propose un exemple de tracé d'une ligne moyenne, mais il n'y a pas de ligne pointillée. Généralement, afin d'éviter toute confusion, la ligne moyenne est tracée avec une ligne pointillée. Ici, je dessine simplement la ligne droite n-terminale dans une boucle, ce qui est une solution de contournement. Si vous avez une meilleure méthode, veuillez laisser un message. Merci.

Le code d'implémentation ci-dessus pour ichart.js permettant de dessiner des lignes pointillées et des effets de lignes pointillées moyennes est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.