iChart JS自定义报表+多报表集成+去除一条线上的部分点

//Deploy data
function showArea2D(element,title,subtitle,foottext,labels,data,myListener){

    if(labels.length != 0) {
        var chart = new iChart.LineBasic2D({
            render : element,
            data: [
                {
                    name : 'Product',
                    value:data,
                    color:'#1f7e92',
                    line_width:0
                }
            ],
            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:5000
                    },
                    {
                        position:'bottom',
                        label : {color:'#9d987a',font : 'Times New Roman',fontsize:11,fontweight:600},
                        scale_enable : true,
                        labels:labels
                    }
                ],
                background_color:'#f6f9fa'
            },

            sub_option:{
                hollow_inside:false,
                point_size:16,
                label:false,
	       //Remove some points from the line
                listeners:{
                    beforedraw:function(target){

                        return true;
                    },

                    initialize:function(target){
                        for(var i = 0; i < data.length; i++) {

                            if(data[i] == 2) {
                                target.intersections[i][0].x=-500;
                            }
                        }


                        console.log(target.intersections);
                    }
                }
            }
        });

        //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-40,y+h/4+5,false,'#3e576f')
                    .textBaseline('top')
                    .fillText('Failure',x-40,y+3*h/4-5,false,'#3e576f');
            }
        }));

        //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 ;
                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 ;
                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');
            }
        }));

        //No data
        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/2;
                chart.target.line(x,y,x+W,y,2,'#00a9d9')
                    .textAlign('start')
                    .textBaseline('middle')
                    .textFont('600 12px Verdana')
                    .fillText('',x+W+5,y,false,'#b32c0d');
            }
        }));


        chart.draw();
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值