$.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
});