Home > Developer > JavaScript
A hot potato was added to implement a Gantt chart representation on the web page, and the line drawing function is required.
I wanted to use the open-source Web Gantt Chart project, but I found that the open-source projects in this field are too rough. A little more refined, they all need to be charged.
For example, Yidu Gantt Chart (www.edogantt.com), ext Gantt (using extjs to implement www.longboo.com), and general Gantt Chart (www.plusgantt.com ).
All of the above are implemented using JavaScript, so I have to lament that JavaScript is too strong now, and what effect does CSS want to do.
Open source is not good, only do it by yourself, first conquer the draw line. The following is the source code (test OK in IE8 ):
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">Although a few more points are drawn as much as possible, the Sawtooth is still very serious, so I basically gave up this method.
Continue to investigate. You can use SVG, VML, and HTML 5 <canvas> methods to draw images using JavaScript on the web page. However, at this stage, it seems that they are not compatible with all browsers.
Will jquery have similar plug-ins? In this way, you do not need to consider browser compatibility, because jquery will help us solve the problem.
I found jqplot (www.jqplot.com), which is based on the canvas tag of HTML 5 (a large number of canvas labels can be seen using the plot generated by firebug). I tested ff, chrome, IE8 is normal.
When referring to the example, we found that exceptions need to be made to the IE series. <! -- [If lt ie 9]> <script language = "JavaScript" type = "text/JavaScript" src = "jqplot/excanvas. js"> </SCRIPT> <! [Endif] -->
If the preceding statement is not added, the JS error 'window. g_vmlcanvasmanager' is null or not an object in IE8.
Although jqplot is powerful, it is still far different from my needs. Back to the origin, study the Gantt chart generated by Edo and plus, and find that the style of the connection line can be generated using Div, And the browser above is compatible.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">
The long journey took the first step and continued.
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
