jQuery Gantt Package是一個(gè)真正的跨平臺(tái)，基于HTML5 / jQuery的本地實(shí)現(xiàn)，具有2個(gè)不同的gantt小部件，可滿(mǎn)足您所有基于gantt的可視化需求。還帶有ASP.NET WebControl和MVC擴(kuò)展，可輕松集成到現(xiàn)有應(yīng)用中。

點(diǎn)擊下載jQuery Gantt Package試用版

角度樣本

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

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

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

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

1）如何運(yùn)行Angular示例

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

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

使用NPM運(yùn)行Angular示例的步驟：

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

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

使用Visual Studio Code運(yùn)行Angular示例的步驟：

1. 打開(kāi)Visual Studio Code IDE
2. 使用File-> Open Folder導(dǎo)入Angular gantt項(xiàng)目
3. 使用視圖->集成終端打開(kāi)命令窗口，然后選擇終端標(biāo)簽。
4. 然后按照上述NPM步驟執(zhí)行步驟2至4。

2）角甘特結(jié)構(gòu)與安裝

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

該平臺(tái)僅包含構(gòu)建和運(yùn)行基本Angular示例所需的文件和文件夾。

創(chuàng)建項(xiàng)目目錄并根據(jù)需要對(duì)其進(jìn)行結(jié)構(gòu)化。我們看起來(lái)像這樣

Angular Gantt文件可以列出如下。

• package.json
• index.html
• ts文件夾
• 應(yīng)用文件夾

package.json

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

index.html

“ index.html”包含所有甘特圖源引用。它具有根標(biāo)簽，其根標(biāo)簽的名稱(chēng)為“ ”，該根標(biāo)簽可通過(guò)導(dǎo)出類(lèi)進(jìn)行檢測(cè)，以查找該樣品屬于GanttControl還是FlexyGantt。并且請(qǐng)確保注釋除之外的其他可用根標(biāo)記。

'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”導(dǎo)入角度組件，例如BrowserModule，platformBrowserDynamic等，以及甘特類(lèi)。

我們的甘特圖導(dǎo)出類(lèi)的聲明使用'@NgModule（{}）'裝飾器進(jìn)行。并且它還會(huì)引導(dǎo)導(dǎo)出類(lèi)“ 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”文件夾包含運(yùn)行我們的甘特樣本所需的源文件，例如ResourceStrings，Scripts，Styles。

-ResourceLoadView示例

甘特圖可以集成到生產(chǎn)排程APS系統(tǒng)中，用于解決復(fù)雜生產(chǎn)模型下多約束、有限產(chǎn)能的快速實(shí)時(shí)計(jì)劃優(yōu)化和生產(chǎn)調(diào)度問(wèn)題；是智能制造的核心解決方案和大腦中樞。

相關(guān)產(chǎn)品介紹：

VARCHART XGantt：支持ActiveX、.Net等平臺(tái)的C#甘特圖控件
AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
phGantt Time Package：對(duì)任務(wù)和時(shí)間的分配管理的甘特圖
dhtmlxGantt：交互式JavaScript / HTML5甘特圖