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

點擊下載jQuery Gantt Package試用版

反應(yīng)樣本

你可以在下面的路徑中找到反應(yīng)樣本，

/PlatformSamples/React/Samples.

注意:您還可以在以下路徑中找到可選的React Visual Studio項目或解決方案，

/PlatformSamples/React/GanttInReact.csproj.

如何運行反應(yīng)樣品

您可以使用NPM(cmd)、Visual Studio 2017版本或Visual Studio代碼運行React甘特樣例。對于所有這3種方法，您需要首先使用npm來安裝相關(guān)的'node_modules'，如下面的步驟所示。(‘node_modules’包依賴關(guān)系已經(jīng)在‘package’中指定了。json文件。)

另外，確保將您的npm更新為最新版本(使用“npm版本”來確定您的版本)。要更新到最新，使用cmd行:"npm install npm@latest -g"。

使用NPM運行React示例的步驟:

1. 使用“作為管理員運行”選項在命令提示符中瀏覽到項目目錄(..\PlatformSamples\React)。
2. 輸入“npm install”。這將在node_modules文件夾中安裝依賴的模塊。
3.運行“npm start”。
4. 示例自動在默認(rèn)瀏覽器中運行。否則，復(fù)制端口并粘貼到任何瀏覽器中。

使用Visual Studio 2017運行React示例的步驟:

1. 使用“npm Install webpack -g”和“npm Install webpack-cli -g”全局安裝webpack和webpack-cli。
2. 安裝'node_modules'包(上面NPM步驟中的步驟1和步驟2)
3.然后打開'.csproj'與Visual Studio 2017的項目目錄，并照常運行它。

使用Visual Studio代碼運行React示例的步驟:

1. 打開Visual Studio代碼IDE
2. 使用File—>打開文件夾導(dǎo)入React gantt項目
3.使用視圖——>集成終端打開命令窗口，并選擇Terminal選項卡
4. 然后按照上面NPM步驟中的步驟2到步驟4執(zhí)行。

反應(yīng)甘特結(jié)構(gòu)和安裝

React甘特包可以在/PlatformSamples/React中找到

創(chuàng)建您的項目目錄，并根據(jù)需要構(gòu)造它。我們的是這樣的，

• package.json。
• index . html。
• webpack.config.js。
• Src文件夾。
• 樣本文件夾。
• 數(shù)據(jù)源文件夾。

“package.json"的文件指定了項目名稱、描述和反應(yīng)、Webpack和Babel包，這些包可以在npm安裝期間安裝。

配置Webpack

在這里，我們通過在webpack.config.js文件中添加所需的配置來為React甘特設(shè)置webpack。

const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: {
        // Here, Webpack to start bundling our app at following paths.
        GanttControlSkeleton: './Samples/GanttControlSkeleton/GanttControlSkeleton',
        FlexyGanttSkeleton: './Samples/FlexyGanttSkeleton/FlexyGanttSkeleton.jsx'
    },
    output: {

        // Output our app to the dist/ directory with Sample name. (eg: dist/SampleBrowser.js)
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: 'dist/'
    },
    devServer: {
        inline: true,
        port: 3000
    },
    // devtool enhances the debugging process
    devtool: 'inline-source-map',
    resolve: {
        // add alias for application code directory
        alias: {
            RQSrc: path.resolve(__dirname, 'Src'),
            Samples: path.resolve(__dirname, 'Samples'),
        },
    },
    //Webpack uses loaders to translate the file before bundling them.
    module: {
        rules: [
            {
                test: /.jsx?$/, loader: 'babel-loader',

                exclude: /node_modules/,

                //Configuring babel

                query: {
                    presets: ['es2015', 'react']
                }
            },

            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test: /\.(png|jp(e*)g|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                       limit: 8000,
                        name: 'images/[hash]-[name].[ext]'
                    }
                }]
            },
        ],
    },
};                                                                 webpack.config.js

如欲進(jìn)一步了解webpack，請參閱以下連結(jié)webpack。

“Src”文件夾

“Src”文件夾包含需要運行甘特的源文件，如ResourceStrings、腳本、樣式，它還包括“React_components”文件夾，其中包含“GanttControl”。jsx”和“FlexyGantt。jsx”，這些組件被導(dǎo)出其功能，并且可以通過導(dǎo)入組件在任何地方使用。

“樣品”文件夾

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

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