I have a problem drawing connecting lines on a table and need help. _html/css_WEB-ITnose

canvas

If you want to make a trend chart like this, draw a line (slash) between the two grids with numbers in the table for connection.

Website: http://www.55128.cn/zs/1_4.htm


After taking a look, it seems that the html5 canvas tag is used, but I don’t understand it. That's how to apply this tag to the f5d188ed2c074f8b944552db028f98a1 tag.

If you have relevant examples, I hope you can give them some advice. Thanks.

Reply to the discussion (solution)

The effect is as shown in the picture.

Use svg, IE vml

Use svg, IE vml

I saw svg, but how to use it on the f5d188ed2c074f8b944552db028f98a1 tag of html?

Are there any examples?

Use svg, IE vml

I saw svg, but how to use it on the f5d188ed2c074f8b944552db028f98a1 tag of html?

Are there any examples?
svg absolute positioning position: absolute;

 <svg width="800px" height="800px"  style="position: absolute; top:0;left:0"   > <line x1="0" y1="0" x2="100" y2="100" style="stroke:red;stroke-width:2"/> <line x1="50" y1="150" x2="100" y2="100" style="stroke:blue;stroke-width:2"/></svg> 	<table> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 	</table>

Use svg, IE vml

I saw svg, but how to use it in html< Above the ;table> tag?

Are there any examples?
svg absolute positioning position: absolute;

 <svg width="800px" height="800px"  style="position: absolute; top:0;left:0"   > <line x1="0" y1="0" x2="100" y2="100" style="stroke:red;stroke-width:2"/> <line x1="50" y1="150" x2="100" y2="100" style="stroke:blue;stroke-width:2"/></svg> 	<table> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 	</table>

Can this only use absolute positioning? If the td with numbers in each grid is taken out and connected, then this absolute positioning coordinate method is inconvenient.

Can this only use absolute positioning? If the td with numbers in each grid is taken out to connect the lines, then this absolute positioning coordinate method will be inconvenient.
1. It is not very troublesome to get the coordinates given by TD through offsetTop and offsetLeft
2. The data table is also drawn using svg

Can this only use absolute positioning? If the td with numbers in each grid is taken out to connect the lines, then this absolute positioning coordinate method will be inconvenient.
1. It is not very troublesome to get the coordinates given by TD through offsetTop and offsetLeft
2. The data table is also drawn with svg

Thank you, I have been thinking about it for a long time and I still can’t figure it out. It can be tested in HTML, but once it is put into the JSP page, it cannot be displayed. well. .