jQuery Gantt Package是一個真正的跨平臺，基于HTML5 / jQuery的本地實現，具有2個不同的gantt小部件，可滿足您所有基于gantt的可視化需求。還帶有ASP.NET WebControl和MVC擴展，可輕松集成到現有應用中。

點擊下載jQuery Gantt Package試用版

角度樣本

您可以在以下路徑中找到Angular Samples，

<安裝路徑> / PlatformSamples / AngularSamples / app / Samples

注意：您還可以在以下路徑中找到可選的VisulStudio項目或Angular解決方案

<安裝路徑> /PlatformSamples/AngularSamples/Angular4DemoVS2015.csproj

1）如何運行Angular示例

您可以使用NPM（cmd），Visual Studio 2015+版本或Visual Studio Code運行Angular Gantt示例。對于所有這三種方法，您需要首先使用npm來安裝從屬的“ node_modules”，如以下步驟中所述。 （已經在“ package.json”文件中指定了“ node_modules”軟件包依賴項。）

另外，請確保將您的npm版本更新為5.4.1或更高版本。 （使用“ npm版本”來確定您的版本）。要更新到最新版本，請使用cmd行：“ npm install npm @ latest -g”。

使用NPM運行Angular示例的步驟：

1. 使用“以管理員身份運行”選項，在命令提示符下瀏覽到項目目錄（../PlatformSamples/AngularSamples）。
2. 鍵入“ npm install”。這會將不同的從屬模塊安裝在“ node_modules”目錄中。
3. 運行“ npm start”。
4. 該示例自動在默認瀏覽器中運行。如果不是，請復制本地主機并將其粘貼到瀏覽器中。

1. 安裝“ node_modules”軟件包（上述NPM步驟中的步驟1和步驟2）
2. 然后從項目目錄中使用Visual Studio 2015和更高版本打開“ .csproj”，然后照常運行。

使用Visual Studio Code運行Angular示例的步驟：

1. 打開Visual Studio Code IDE
2. 使用File-> Open Folder導入Angular gantt項目
3. 使用視圖->集成終端打開命令窗口，然后選擇終端標簽。
4. 然后按照上述NPM步驟執行步驟2至4。

2）角甘特結構與安裝

Angular Gantt軟件包v4.0在<安裝路徑> / PlatformSamples / AngularSamples中可用

該平臺僅包含構建和運行基本Angular示例所需的文件和文件夾。

創建項目目錄并根據需要對其進行結構化。我們看起來像這樣

Angular Gantt文件可以列出如下。

• package.json
• index.html
• ts文件夾
• 應用文件夾

package.json

該JSON文件還包含諸如angular-cli，打字稿，在'devDependencies'下鍵入的包。在這里，用戶還可以根據他們的項目需求添加一些其他軟件包。

index.html

“ index.html”包含所有甘特圖源引用。它具有根標簽，其根標簽的名稱為“ ”，該根標簽可通過導出類進行檢測，以查找該樣品屬于GanttControl還是FlexyGantt。并且請確保注釋除之外的其他可用根標記。

'ts'文件夾

由于Angular gantt基于TypeScript，因此在此“ ts”文件夾中可以使用諸如datejs.d.ts，jquery.d.ts，RadiantQGantt_TS2.3.d.ts等TypeScript聲明文件。

“ app”文件夾

“ app”文件夾由main.ts和Samples文件夾組成。

以下文件和目錄在此“ app”和“ Samples”文件夾中可用。

• Samples folder        -
• main.ts
• SampleBrowser folder

-main.ts

“ main.ts”導入角度組件，例如BrowserModule，platformBrowserDynamic等，以及甘特類。

我們的甘特圖導出類的聲明使用'@NgModule（{}）'裝飾器進行。并且它還會引導導出類“ RQGanttSample”。

import { enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Http, Response, HttpModule, JsonpModule } from '@angular/http';
import { NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Routes, RouterModule } from '@angular/router';
// RadiantQ components.
import { DataService } from './data.service';
import { RQGanttControl, RQFlexyGantt, Column, getClientTemplate, getClientEditorTemplate, rqTemplateBinder, getTaskItemTemplate, getParentTaskItemTemplate } from './RQGanttSettings';
import { SampleBrowser } from './SampleBrowser/SampleBrowser';
import { FlexyGanttSkeleton } from './Samples/FlexyGanttSkeleton/FlexyGanttSkeleton';
import { GanttControlSkeleton } from './Samples/GanttControlSkeleton/GanttControlSkeleton';
import { GanttControlCustomDataBinding } from './Samples/GanttControlCustomDataBinding/GanttControlCustomDataBinding';
import { ResourceLoadView } from './Samples/ResourceLoadView/ResourceLoadView';
// Route config let's you map routes to components
const routes = [
    {
       path: 'GanttControlCustomDataBinding',

        component: GanttControlCustomDataBinding
    },
    {
        path: 'GanttControlSkeleton',

        component: GanttControlSkeleton
    },
    {
        path: 'FlexyGanttSkeleton',
        component: FlexyGanttSkeleton
    },
    {
        path: 'ResourceLoadView',
        component: ResourceLoadView
    },
    {
        path: '',
        redirectTo: '/GanttControlCustomDataBinding',
        pathMatch: 'full'
    }
];
export const appRouterModule = RouterModule.forRoot(routes, { useHash: true}); // 'useHash' - To avoid 404 error while manually refeshing URL.
//enableProdMode();
@NgModule(
    imports: [
        BrowserModule,
        HttpModule,
        JsonpModule,
        appRouterModule
    ],
    declarations: [
        getParentTaskItemTemplate,
        getTaskItemTemplate,
        getClientTemplate,
        getClientEditorTemplate,
        rqTemplateBinder,
        Column,
        RQFlexyGantt,
        RQGanttControl,
        ResourceLoadView,
        GanttControlCustomDataBinding,
        GanttControlSkeleton,
        FlexyGanttSkeleton,
        SampleBrowser
    ],
    providers: [DataService],
    bootstrap: [SampleBrowser]
})
export class RQSampleBrowserModule {
    constructor(private dataService: DataService) {
        for (var i = 0; i < routes.length; i++) { if (routes[i].path == "" && routes[i]['redirectTo'] != "") { // To update current sample's link color.(SampleBrowser.ts). dataService.obj.activeSampleURL = routes[i]['redirectTo']; break; } } } } platformBrowserDynamic().bootstrapModule(RQSampleBrowserModule);

“樣品”文件夾

“ Samples”文件夾包含各種示例，分別是html，css，ts和json文件。 它還在其中包含“ Src”文件夾。

-'src'文件夾

“ Src”文件夾包含運行我們的甘特樣本所需的源文件，例如ResourceStrings，Scripts，Styles。

-ResourceLoadView示例

甘特圖可以集成到生產排程APS系統中，用于解決復雜生產模型下多約束、有限產能的快速實時計劃優化和生產調度問題；是智能制造的核心解決方案和大腦中樞。

相關產品介紹：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構建復雜且內容豐富的甘特圖的理想工具
phGantt Time Package：對任務和時間的分配管理的甘特圖
dhtmlxGantt：交互式JavaScript / HTML5甘特圖