Arrange the data on the left to the neat and dense data on the right.
<Html>
<Body>
<Canvas id = "CanvasOri" width = "200" height = "200" style = "border: 1px solid # c3c3c3;">
Your browser does not support the canvas element.
</Canvas>
<Canvas id = "Canvas1" width = "200" height = "200" style = "border: 1px solid # c3c3c3;">
Your browser does not support the canvas element.
</Canvas>
<Script type = "text/javascript">
Var alldata = [[0, 90,-1], [0, 30,-1], [39, 51,-1], [0, 30,-1], [30,120,-1], [30, 60,-1], [60, 90,-1], [15, 40,-1], [50, 70, -1], [30, 61,-1], [130,165,-1], [135,175,-1], [175,200,-1];
Function draw (canvas, data, bar, group ){
Var c = document. getElementById (canvas );
Var cxt = c. getContext ("2d ");
Cxt. fillStyle = "# BBD7AF ";
Var grd = cxt. createLinearGradient (0, 0,200,200 );
Grd. addColorStop (0, "# B9D6AD ");
Grd. addColorStop (1, "# D8E7D1 ");
Cxt. lineWidth = 1;
Var len = data. length;
If (group =-1) group = len;
Bar = bar/group
For (var I = 0; I <len; I ++ ){
Var index = I;
If (data [I] [2]! =-1) index = data [I] [2];
Cxt. fillStyle = grd;
Cxt. strokeRect (bar * index, data [I] [0], bar, data [I] [1]-data [I] [0]);
Cxt. fillRect (bar * index + 1, data [I] [0] + 1, bar-2, data [I] [1]-data [I] [0]-2 );
Cxt. fillStyle = "# FF0000 ";
Cxt. fillText (data [I] [0] + "," + data [I] [1], bar * index + bar/2-10, data [I] [0] + (data [I] [1]-data [I] [0])/2 );
}
}
// Sorted data
Function splitdata (data ){
Function numberorder (a, B ){
Return a [0]-B [0];
}
Data. sort (numberorder );
Var stack = [];
Var len = data. length;
Var s = 0;
Var curmax = 0;
For (var I = 0; I <len-1; I ++ ){
If (curmax <data [I] [1]) {
Curmax = data [I] [1];
}
If (curmax <= data [I + 1] [0]) {
Stack. push (data. slice (s, I + 1 ));
S = I + 1;
}
}
Stack. push (data. slice (s, I + 1 ));
Return stack;
}
Var alldata = splitdata (alldata );
For (var m = 0; m <alldata. length; m ++ ){
Var data = alldata [m];
Function numberorder (a, B ){
Return a [0]-B [0];
}
Data. sort (numberorder );
Draw ("CanvasOri", data, 200,-1 );
Var k = 0;
Var len = data. length;
For (var I = 0; I <len; I ++ ){
If (data [I] [2]! =-1) continue;
Data [I] [2] = k;
Var curmax = data [I] [1];
For (var j = I + 1; j <len; j ++ ){
If (curmax <= data [j] [0] & data [j] [2] =-1 ){
Data [j] [2] = k;
Curmax = data [j] [1];
}
}
K ++;
}
Draw ("Canvas1", data, 200, k );
Document. write ("<br> ------------------ <br> ")
For (var I = 0; I <len; I ++ ){
Document. write ("<br>" + data [I] [0] + "& nbsp;" + data [I] [1] + "& nbsp; "+ data [I] [2] +" <br> ");
}
}
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
