JS Gantt Chart JQuery. gantt, Gantt Chart jquery. gantt

JS Gantt Chart JQuery. gantt, Gantt Chart jquery. gantt

JQuery. Gantt is an open-source JS Component Library Based on the JQuery library for implementing the Scalable functions of Gantt charts. It allows you to view the itinerary and data distribution in a graphical manner.

On the basis of the original code, I modified some code. The main improvements are as follows:

1. Fixed the "error reported by the original code js when a piece of data is empty ".

2. fixed the problem that the progress bar will flash when ie is displayed ".

3. json data is no longer in the new Date (timestamp) format and is directly a timestamp.

For: http://download.csdn.net/detail/wangshaner1/8314349

The page is displayed as follows:

Box 1 is a page flip, box 2 is the current time, box 3 is the scroll bar and scroll button, and box 4 is the display granularity switch.

Code introduction:

<link rel="stylesheet" href="css/style.css" />

<! -- The package does not contain jquery, You need to download the latest version --> <script src = "js/jquery-1.7.min.js"> </script> <script src = "js/jquery. fn. gantt. js "> </script> <! -- If jquery1.9 or above, you also need to introduce --> <script src = "js/jquery-migrate-1.2.1.min.js"> </script>

Note: If you introduce jquery 1.9 +, You need to introduce js/jquery-migrate-1.2.1.min.js, because jquery1.9 + canceled the support for $. browser, if not introduce the upgrade package, js running error

The js Code for generating a chart is as follows:

$ ('Selector '). gantt ({source: source, // For the displayed data, see the following analysis navigate: "scroll", // It is displayed as scroll or buttonsmonths: ["January", "February ", "March", "April", "May", "June", "July", "August", "September", "October", "November ", "December"], // The language dow: ["S", "M", "T", "W", "T", "F ", "S"], // The language scale displayed in the week: "weeks", // The default display granularity maxScale: "months", // The maximum display granularity minScale: "days", // minimum granularity itemsPerPage: 18, // Number of onItemClick: function (data) displayed on each page {// Click Event displayed on the progress bar, for data, see source definition // alert ("Item clicked-show some details" + data);}, onAddClick: function (dt, rowId) {// click event in the blank area of the chart }, onRender: function () {// events during rendering }});

The above source indicates the data source in the following format:

Source: [{name: "Example", // the title of a row desc: "Something", // values: [{from: "1333411200000 ", // start time, 13-bit timestamp, which is different from the original version "/Date (1333411200000)/" to: "1328832000000", // End Time, 13-bit timestamp, this is different from the original "/Date (1333411200000)/" desc: "Something", // description label: "Example Value", // The label customClass displayed on the progress bar: "ganttRed", // display color, basically gantt + "Color Term" dataObj: Data Object imported by dataObj // onclick and other events}]

For other parameters, refer to [1].

Refer:

[1] http://www.cnblogs.com/liusuqi/archive/2013/06/09/3129293.html,JQuery.Gantt (Gantt Chart) Development Guide