//Deploy datafunction showArea2D(element,title,subtitle,foottext,labels,data){ var data = [ { name : 'Deploy', value:[1,3,1,3,3,3,1,1,3,1,3,1], color:'#1f7e92', line_width:0 } ]; var chart = new iChart.LineBasic2D({ render : element, data: data, title : 'Deploy Data', width : screen.width*25/84, height : screen.height*34/63, coordinate:{ height:'90%', scale:[ { position:'left', scale_enable : false, start_scale:0, scale_space:1, end_scale:4, text_space:500 }, { position:'bottom', label : {color:'#9d987a',font : 'Times New Roman',fontsize:11,fontweight:600}, scale_enable : false, labels:labels } ], background_color:'#f6f9fa' }, sub_option:{ hollow_inside:false, point_size:10, label:false }, labels:["Jan","Feb","Mar","Apr","May","June","July","Aug","Sep","Oct","Nov","Dec"] }); //Custom plugin, show success and failure. chart.plugin(new iChart.Custom({ drawFn:function(){ //Position var coo = chart.getCoordinate(), x = coo.get('originx'), y = coo.get('originy'), w = coo.width, h = coo.height; //Render the text chart.target.textAlign('start') .textBaseline('bottom') .textFont('600 11px Times New Roman') .fillText('Success',x-50,y+h/4+5,false,'#3e576f') .textBaseline('top') .fillText('Failure',x-50,y+3*h/4-5,false,'#3e576f'); console.log(x, y, w, h); } })); //Success line chart.plugin(new iChart.Custom({ drawFn:function(){ var avg = chart.total/5, coo = chart.getCoordinate(), x = coo.get('originx'), W = coo.width, S = coo.getScale('left'), H = coo.height, h = (avg - S.start) gxdmn / S.distance, y = chart.y + H/4 ; console.log("two:"+y); chart.target.line(x,y,x+W,y,2,'#009a58') .textAlign('start') .textBaseline('middle') .textFont('600 12px Verdana') .fillText('',x+W+5,y,false,'#b32c0d'); } })); //Failure line chart.plugin(new iChart.Custom({ drawFn:function(){ var avg = chart.total/5, coo = chart.getCoordinate(), x = coo.get('originx'), W = coo.width, S = coo.getScale('left'), H = coo.height, h = (avg - S.start) gxdmn / S.distance, y = chart.y + 3*H/4 ; console.log("two:"+y); chart.target.line(x,y,x+W,y,2,'#b32c0d') .textAlign('start') .textBaseline('middle') .textFont('600 12px Verdana') .fillText('',x+W+5,y,false,'#b32c0d'); } })); chart.draw();}