永利最大(官方)网站

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甘特图