iChart JS画自定义图表

//Deploy data
function 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) * H / 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) * H / 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();
}