canvas 连线曲线图封装

$.fn.hChart=function (opt) {
    var setting=$.extend({
        className:'',
        data:[]
    },opt);
    var tbody=this;
    var className=setting.className;
    var arr=setting.data;
    var spanEl=function (le) {
        if(le>0){
            return '<span class="'+className+'">'+le+'</span>';
        }else {
            return Math.abs(le);
        }
    }
    for (let i=0;i<arr.length;i++) {
        var str='<tr id="'+className+'_'+i+'">';
        for(let js in arr[i].arr){
            str+='<td>'+spanEl(arr[i].arr[js])+'</td>';
        }
        str+='</tr>';
        $(str).appendTo(tbody);
    }
    var arr=[];
    $.each($("."+className,tbody),function () {
        var setoff=$(this).offset();
        var jo={"top":setoff.top,"left":setoff.left,id:"canvas_"+$(this).parent().parent().attr("id"),w:$(this).width(),h:$(this).height()};
        arr.push(jo);
    });
    for(let a=arr.length-1;a>0;a--){
        var c=document.createElement("canvas");
        var wLeft=tbody.offset().left;
        var wTop=tbody.offset().top;
        var st=arr[a];
        var pr=arr[a-1];
        var cTop=Math.min(st.top,pr.top);
        var cLeft=Math.min(st.left,pr.left);
        var cw,cuLeft,ch,cuTop,mToLeft,mToTop,liToLeft,liToTop;
        var activeH=st.h/2;
        if(st.left<pr.left){
            cw= pr.left-st.left-st.h;
            cuLeft= st.left-wLeft+st.h;
            ch=st.top-pr.top;
            cuTop=pr.top-wTop+activeH;
            mToLeft=pr.left-cLeft;
            mToTop=pr.top-cTop;
            liToLeft=st.left-cLeft;
            liToTop=st.top-cTop;
        }else if(st.left==pr.left){
            cw= st.w;
            cuLeft=st.left-wLeft;
            ch=(st.top-pr.top)/2+5;
            cuTop=pr.top-wTop+st.h;
            mToLeft=cw/2;
            mToTop=pr.top-cTop;
            liToLeft=cw/2;
            liToTop=st.top-cTop;
        }else{
            cw=st.left-pr.left-st.h;
            cuLeft=st.left-wLeft-cw;
            ch=st.top-pr.top;
            cuTop=pr.top-wTop+activeH;
            mToLeft=pr.left-cLeft;
            mToTop=pr.top-cTop;
            liToLeft=st.left-cLeft;
            liToTop=st.top-cTop;
        }
        c.style.position='absolute';
        c.style.top=cuTop+"px";
        c.style.left=cuLeft+"px";
        c.width=cw;
        c.height=ch;
        c.id=arr[a].id;
        let cx=c.getContext("2d");
        cx.strokeStyle="red";
        cx.moveTo(mToLeft,mToTop);
        cx.lineTo(liToLeft,liToTop);
        cx.stroke();
        $(c).appendTo(tbody);
    }
}

})(jQuery);

     var arr=[
         {"arr":[-3,-2,-5,-4,7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,-5,-4,-7,9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,-5,-4,-7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,8]},
         {"arr":[3,-2,-5,-4,-7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,-5,-4,-7,-9,1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,5,-4,-7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,-5,-4,-7,-9,-1,-6,-8,-3,-2,-5,-4,7,-9,-7,-8,-8]},
         {"arr":[3,-2,-5,-4,-7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,-5,4,-7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,-5,-4,7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,-5,-4,-7,9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,-5,-4,-7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,8]},
         {"arr":[3,-2,-5,-4,-7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,-5,-4,-7,-9,1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,5,-4,-7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,-5,-4,-7,-9,-1,-6,-8,-3,-2,-5,-4,7,-9,-7,-8,-8]},
         {"arr":[3,-2,-5,-4,-7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
         {"arr":[-3,-2,-5,4,-7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]},
        {"arr":[-3,2,-5,-4,-7,-9,-1,-6,-8,-3,-2,-5,-4,-7,-9,-7,-8,-8]}
     ];

$("#tbody").hChart({
    className:'active',
    data:arr
});