Ichart.js-Implementierungscode zum Zeichnen gepunkteter Linien und zum Mitteln von gepunkteten Linieneffekten_Javascript-Fähigkeiten

Ichart.js-Implementierungscode zum Zeichnen gepunkteter Linien und zur Mittelung von gepunkteten Linieneffekten

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

Der obige Code ist ein js-Beispiel für das Zeichnen mehrerer Liniendiagramme und eine Methode zum Zeichnen einer durchschnittlichen gepunkteten Linie innerhalb jedes Liniendiagramms.

ichart.js ist ein sehr gutes JS zum Zeichnen von Symbolen. Der Nachteil besteht darin, dass Sie auf der mobilen Seite die Größe zuerst zweimal festlegen und sie dann mithilfe von CSS und JS manuell auf den normalen Bereich reduzieren müssen, um sie hoch zu halten -Definition auf dem Bildschirm.

Auf der offiziellen Website gibt es ein Beispiel für das Zeichnen einer Durchschnittslinie, es gibt jedoch keine gepunktete Linie. Um Verwirrung zu vermeiden, wird die Durchschnittslinie im Allgemeinen mit einer gepunkteten Linie gezeichnet. Hier zeichne ich einfach die n-terminale gerade Linie in einer Schleife, was eine Problemumgehung darstellt. Wenn Sie eine bessere Methode haben, hinterlassen Sie bitte eine Nachricht. Vielen Dank.

Der obige Implementierungscode für ichart.js zum Zeichnen gepunkteter Linien und durchschnittlicher gepunkteter Linieneffekte ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und ich hoffe, dass Sie Script Home unterstützen.