Практическое руководство. Создание диаграммы Ганта с помощью JS Grid

Статья
04/21/2015

Дата последнего изменения: 15 февраля 2011 г.

Применимо к: SharePoint Foundation 2010

В этом практическом руководстве приводятся инструкции по созданию диаграммы Ганта с помощью управления JS Grid. В данном разделе, который создан на основе руководства Практическое руководство. Создание базовой таблицы JS Grid, будет показано, как определять стили для отрезков диаграмм Ганта: суммарная, стандартная, вехи и процент выполнения. У каждого стиля отрезка есть форма, узор и цвет. У каждого конца отрезка есть стиль конца отрезка, цвет и узор. Код, определяющий стили диаграммы Ганта, будет храниться в файле GanttUtilities.cs, расположенном в папке GridUtils, создание которой описывается в статье Практическое руководство. Создание базовой таблицы JS Grid. Будет показано, как изменить данные сетки, чтобы предоставить данные, которые лучше раскрывают возможности диаграммы Ганта. И, наконец, будет показано, как использовать метод enableGantt класса GridDataSerializer для включения диаграммы Ганта.

Примечание
На компьютере могут отображаться другие имена или расположения для некоторых элементов пользовательского интерфейса Visual Studio, которые описываются в приведенных ниже инструкциях. Эти элементы определяются установленным на компьютере выпуском Visual Studio и конкретными параметрами.

На компьютере могут отображаться другие имена или расположения для некоторых элементов пользовательского интерфейса Visual Studio, которые описываются в приведенных ниже инструкциях. Эти элементы определяются установленным на компьютере выпуском Visual Studio и конкретными параметрами.

Необходимые компоненты

Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
разработки SharePoint в Microsoft Visual Studio 2010
Выполнение руководства Практическое руководство. Создание базовой таблицы JS Grid

Примечание
Эту процедуру можно выполнить и без использования Visual Studio 2010, однако проще воспользоваться Visual Studio 2010 и разработки SharePoint в Microsoft Visual Studio 2010.

Создание стилей отрезков диаграммы Ганта

В Visual Studio откройте проект, созданный по инструкциям из руководства Практическое руководство. Создание базовой таблицы JS Grid.
Откройте файл GridUtilities.cs.
DefaultGanttBarStyleIdsColumnName содержит сведения об идентификаторе стиля по умолчанию для отрезков диаграммы Ганта. Не требуется, чтобы имя DefaultGanttBarStyleIdsColumnName использовалось для столбца или поля. Код, предотвращающий это, уже имеется в файле GridUtilities.cs, только он закомментирован.

Раскомментируйте следующие строки:
```
// && iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
// Uncomment for the Gantt how-to
```
а также
```
// && dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
// Uncomment for Gantt how-to
```
Добавьте ссылку на System.Drawing.

В окне Обозреватель решений щелкните правой кнопкой мыши Ссылки, а затем выберите команду Добавить ссылку. На вкладке .NET выберите System.Drawing, а затем нажмите кнопку ОК. System.Drawing используется для рисования отрезков и концов отрезков.
Создайте файл GanttUtilities.cs.
1. В обозревателе решений щелкните правой кнопкой папку GridUtils, укажите на команду Добавить, а затем выберите Новые элементы.
2. Выберите Visual C#, выберите Код, а затем выберите Файл кода.
3. Назовите файл GanttUtilities.cs.

Скопируйте в файл GanttUtilities.cs следующий код.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing; // added for Gantt styles
using Microsoft.SharePoint.JSGrid;

namespace JSGridSample.GridUtilityLib
{
    public class GanttUtilities
    {
        public enum CustomBarStyle { Summary, Standard, Milestone, PctComplete }

        public static GanttStyleInfo GetStyleInfo()
        {
            var styleInfoObj = new GanttStyleInfo();

            /*Summary Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.Summary, BarShape.TopHalf, Color.Gray, BarPattern.Solid,
                BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled,
                BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled,
                "Start Date", "Finish Date", 1));

            /*Standard Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.Standard, BarShape.Full, Color.Blue, BarPattern.Solid,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                "Start Date", "Finish Date", 1));

            /*Milestone Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.Milestone, BarShape.None, Color.Black, BarPattern.Solid,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                BarEndShape.Diamond, Color.Black, BarShapePattern.Filled,
                "Finish Date", "Finish Date", 1));

            /*PctComplete Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.PctComplete, BarShape.MidHalf, Color.Black, BarPattern.Solid,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                "Start Date", "CompleteThrough", 1));

            return styleInfoObj;
        }
    }
}

Класс GanttStyleInfo определяет стили отрезков диаграммы: суммарная, стандартная, вехи и процент выполнения.

Включение диаграммы Ганта

Откройте JSGridWebPartUserControl.ascx.cs.
Добавьте EnableGantt в метод Page_Load.
```
// Point the grid serializer at the grid serializer data.
    _grid.GridDataSerializer = gds;

     // Tell the grid to listen to the GridManager controller.
    _grid.JSControllerClassName = "GridManager";

   // Enable the Gantt chart.
   gds.EnableGantt(DateTime.Now.AddDays(0), DateTime.Now.AddDays(10), GanttUtilities.GetStyleInfo(), null);
```
EnableGantt(DateTime, DateTime, GanttStyleInfo, String) определяет самую раннюю дату начала отрезка диаграммы Ганта, самую позднюю дату окончания отрезка, местонахождение стилей отрезков диаграммы Ганта и имя столбца зависимых ячеек (пустое значение в данном случае). Для простоты даты начала и окончания создаются из текущей даты.

Следующим шагом является изменение данных таблицы для связывания стилей отрезков диаграммы Ганта с каждой строкой данных.

Изменение файла данных таблицы

Откройте файл GridData.cs.
Диаграмме Ганта требуется файл для хранения сведений об идентификаторе стиля отрезков диаграммы Ганта. Соответствующий код уже есть в файле GridData.cs, только он закомментирован. Раскомментируйте следующую строку:
```
//data.Columns.Add(new DataColumn(GridSerializer.DefaultGanttBarStyleIdsColumnName, typeof(GanttUtilities.CustomBarStyle[]))); // uncomment for the Create a Gantt Chart Using JS Grid How-To.
```

Найдите код, назначающий случайные значения дате начала, промежуточной дате и дате завершения.

                dr["Start Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                dr["Finish Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                dr["CompleteThrough"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));

Замените этот код следующим кодом.

stDate = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
if (i % 10 == 0)
                {
                    parent = curKey;
                    j++;
                    dr["Start Date"] = stDate;
                    dr["Finish Date"] = stDate.AddDays(10);
                    //summary gantt bar style
                    dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[1] { (GanttUtilities.CustomBarStyle)(0) };

                }
                else if (i % 10 == 5)
                {
                    // Milestone 
                    dr["Start Date"] = stDate;
                    dr["Finish Date"] = dr["Start Date"];//  +DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                    // Milestone Gantt bar style
                    dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[1] { (GanttUtilities.CustomBarStyle)(2) };
                }
                else
                {
                    dr["Start Date"] = stDate.AddDays(i % 4); ;
                    dr["Finish Date"] = stDate.AddDays(i % 10);
                    dr["CompleteThrough"] = stDate.AddDays(1);
                    // Standard Gantt bar style
                    dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) };
                }

Первой задаче назначен стиль суммарной задачи, пятой задаче назначен стиль вех, а другим задачам назначен "стандартный" стиль отрезков диаграммы.

Стили отрезков диаграммы Ганта задаются с помощью DefaultGanttBarStyleIdsColumnName. Если используется несколько стилей отрезков, каждый стиль отрезка рисуется поверх предыдущего стиля отрезка, поэтому важен порядок применения стилей отрезков. Обратите внимание, что стандартный стиль отрезка создается путем рисования сначала стандартного отрезка, а затем отрезка промежуточного завершения. Это определяется порядком стилей отрезков в пользовательском массиве стилей отрезков.

dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) };

Тестирование веб-части

В Visual Studio нажмите клавишу F5, чтобы запустить проект.

При запуске проекта будет выполнено развертывание и откроется сайт SharePoint 2010. Веб-часть будет автоматически добавлена в коллекцию веб-частей SharePoint 2010.
Откройте и измените любую страницу веб-частей. Веб-часть можно добавить на любую страницу веб-частей.
Нажмите кнопку Вставка, выберите пункт Веб-часть, а затем выберите из настраиваемой категории элемент JSWebPart. Выбранная веб-часть появится на странице.
Когда диаграмма Ганта появится в окне браузера, измените одну из дат: начала, промежуточную или окончания.

Диаграмма Ганта отслеживает изменения даты начала, промежуточной даты или даты окончания. При изменении одной из этих дат отрезок перерисовывается.

См. также

Концепции

Элемент управления JS Grid

Советы по реализации элемента управления JS Grid

Поделиться через