Инструкции по созданию сводной диаграммы с использованием JS Grid
Дата последнего изменения: 23 июня 2011 г.
Применимо к: SharePoint Foundation 2010
В этом практическом руководстве показано, как создать сводную диаграмму с помощью управления JS Grid и Microsoft Visual Studio 2010. Данный раздел является продолжением Практическое руководство. Создание базовой таблицы JS Grid.
На полученной сводной диаграмме показано сводное представление данных, по каждому отделу отображаются квартальные результаты за два финансовых года. Чтобы создать сводную диаграмму требуется предоставить данные, определения столбцов и логику сетки для формирования диаграммы. На последнем этапе необходимо включить сводную область сетки.
.gif "Примечание") Примечание |
|---|
На компьютере могут отображаться различные имена или расположения для некоторых элементов пользовательского интерфейса Visual Studio в приведенных ниже инструкциях. Эти элементы определяются установленным на компьютере выпуском Visual Studio и конкретными параметрами. |
Необходимые компоненты
Microsoft SharePoint Foundation 2010
Visual Studio 2010
разработки SharePoint в Microsoft Visual Studio 2010
Полный перечень инструкций: Практическое руководство. Создание базовой таблицы JS Grid
| Примечание |
|---|
Хотя это практическое руководство можно выполнить без использования Visual Studio, проще сделать это с помощью Visual Studio 2010 и разработки SharePoint в Microsoft Visual Studio 2010. |
Добавление сводных данных в файл данных сетки
От имени администратора запустите Visual Studio 2010 и откройте решение JSGrid, созданное в Практическое руководство. Создание базовой таблицы JS Grid.
Разверните папку GridUtils и откройте файл GridData.cs.
Для сводной сетки требуются квартальные данные для каждого отдела. Образец данных для базовой сетки уже есть в файле GridData.cs, а данная процедура добавляет квартальные данные в этот файл данных.
Измените инструкцию return таблицы DataTable следующим образом.
return buildPivotedView(data);Вставьте следующий код в файл GridData.cs.
private DataTable buildPivotedView(DataTable data) { //quarter 1 columns data.Columns.Add(new DataColumn("costq 1", typeof(int))); data.Columns.Add(new DataColumn("costq 2", typeof(int))); data.Columns.Add(new DataColumn("costq 3", typeof(int))); data.Columns.Add(new DataColumn("costq 4", typeof(int))); //quarter 2 columns data.Columns.Add(new DataColumn("costq 5", typeof(int))); data.Columns.Add(new DataColumn("costq 6", typeof(int))); data.Columns.Add(new DataColumn("costq 7", typeof(int))); data.Columns.Add(new DataColumn("costq 8", typeof(int))); //build column headers data.Columns.Add(new DataColumn("Quarter 1", typeof(string))); data.Columns.Add(new DataColumn("Quarter 2", typeof(string))); data.Columns.Add(new DataColumn("Quarter 3", typeof(string))); data.Columns.Add(new DataColumn("Quarter 4", typeof(string))); int i = 0; foreach (DataRow dr in data.Rows) { //pivoted view dr["costq 1"] = _rand.Next(1000000) + 30000; dr["costq 2"] = _rand.Next(1000000) + 30000; dr["costq 3"] = _rand.Next(1000000) + 30000; dr["costq 4"] = _rand.Next(1000000) + 30000; dr["costq 5"] = _rand.Next(1000000) + 30000; dr["costq 6"] = _rand.Next(1000000) + 30000; dr["costq 7"] = _rand.Next(1000000) + 30000; dr["costq 8"] = _rand.Next(1000000) + 30000; dr["FY 2009 Estimate"] = ((int)dr["costq 1"] + (int)dr["costq 2"] + (int)dr["costq 3"] + (int)dr["costq 4"]) / 4; dr["FY 2010 Estimate"] = ((int)dr["costq 5"] + (int)dr["costq 6"] + (int)dr["costq 7"] + (int)dr["costq 8"]) / 4; dr["Yearly Estimate"] = ((int)dr["FY 2009 Estimate"] + (int)dr["FY 2010 Estimate"]) / 2; i++; dr["Quarter 1"] = "Quarter 1"; dr["Quarter 2"] = "Quarter 2"; dr["Quarter 3"] = "Quarter 3"; dr["Quarter 4"] = "Quarter 4"; } return data; }Private Function buildPivotedView(ByVal data As DataTable) As DataTable 'quarter 1 columns data.Columns.Add(New DataColumn("costq 1", GetType(Integer))) data.Columns.Add(New DataColumn("costq 2", GetType(Integer))) data.Columns.Add(New DataColumn("costq 3", GetType(Integer))) data.Columns.Add(New DataColumn("costq 4", GetType(Integer))) 'quarter 2 columns data.Columns.Add(New DataColumn("costq 5", GetType(Integer))) data.Columns.Add(New DataColumn("costq 6", GetType(Integer))) data.Columns.Add(New DataColumn("costq 7", GetType(Integer))) data.Columns.Add(New DataColumn("costq 8", GetType(Integer))) 'build column headers data.Columns.Add(New DataColumn("Quarter 1", GetType(String))) data.Columns.Add(New DataColumn("Quarter 2", GetType(String))) data.Columns.Add(New DataColumn("Quarter 3", GetType(String))) data.Columns.Add(New DataColumn("Quarter 4", GetType(String))) Dim i As Integer = 0 For Each dr As DataRow In data.Rows 'pivoted view dr("costq 1") = _rand.Next(1000000) + 30000 dr("costq 2") = _rand.Next(1000000) + 30000 dr("costq 3") = _rand.Next(1000000) + 30000 dr("costq 4") = _rand.Next(1000000) + 30000 dr("costq 5") = _rand.Next(1000000) + 30000 dr("costq 6") = _rand.Next(1000000) + 30000 dr("costq 7") = _rand.Next(1000000) + 30000 dr("costq 8") = _rand.Next(1000000) + 30000 dr("FY 2009 Estimate") = (CInt(Fix(dr("costq 1"))) + CInt(Fix(dr("costq 2"))) + CInt(Fix(dr("costq 3"))) + CInt(Fix(dr("costq 4")))) / 4 dr("FY 2010 Estimate") = (CInt(Fix(dr("costq 5"))) + CInt(Fix(dr("costq 6"))) + CInt(Fix(dr("costq 7"))) + CInt(Fix(dr("costq 8")))) / 4 dr("Yearly Estimate") = (CInt(Fix(dr("FY 2009 Estimate"))) + CInt(Fix(dr("FY 2010 Estimate")))) / 2 i += 1 dr("Quarter 1") = "Quarter 1" dr("Quarter 2") = "Quarter 2" dr("Quarter 3") = "Quarter 3" dr("Quarter 4") = "Quarter 4" Next Return data End Function
Сериализатор управления JS Grid сериализирует конфигурацию и данные управления JS Grid в строку JSON (JavaScript Object Notation). Элемент управления "Сетка" создает строку JSON и помещает ее на страницу.
SerializeDataValue указывает сериализатору выполнить сериализацию фактического значения. SerializeLocalizedValue указывает сериализатору выполнить сериализацию отображаемого или локализованного значения. Рассмотрите дату. Например, дата может быть представлена как "11/2010". Отображаемая дата в формате "месяц/год" значительно отличается от фактического значения даты.
Добавление кода сводной диаграммы в файл служебных программ сетки
Код для синтаксического анализа данных сводной сетки необходимо добавить в файл GridUtilities.cs. Файлы GridUtilities.cs и GridData.cs размещены в папке GridUtils.
В Visual Studio откройте файл GridUtilities.cs.
Вставьте следующий код в файл GridUtilities.cs.
public static IList<PivotedGridColumn> GetPivotedGridColumns(DataTable table) { List<PivotedGridColumn> r = new List<PivotedGridColumn>(); //Create the Pivoted "Header" Column PivotedGridColumn col = new PivotedGridColumn(); col.ColumnKey = "header"; col.FieldKeys = new String[] { "Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4" }; col.Name = "Quarter"; col.Width = 100; r.Add(col); //display col = new PivotedGridColumn(); col.ColumnKey = "tests1"; col.FieldKeys = new String[] { "costq 1", "costq 2", "costq 3", "costq 4" }; col.Name = "Fiscal 2009"; col.Width = 100; r.Add(col); col = new PivotedGridColumn(); col.ColumnKey = "tests2"; col.FieldKeys = new String[] { "costq 5", "costq 6", "costq 7", "costq 8" }; col.Name = "Fiscal 2010"; col.Width = 100; r.Add(col); return r; }Public Shared Function GetPivotedGridColumns(ByVal table As DataTable) As IList(Of PivotedGridColumn) Dim r As New List(Of PivotedGridColumn)() 'Create the Pivoted "Header" Column Dim col As New PivotedGridColumn() col.ColumnKey = "header" col.FieldKeys = New String() {"Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"} col.Name = "Quarter" col.Width = 100 r.Add(col) 'display col = New PivotedGridColumn() col.ColumnKey = "tests1" col.FieldKeys = New String() {"costq 1", "costq 2", "costq 3", "costq 4"} col.Name = "Fiscal 2009" col.Width = 100 r.Add(col) col = New PivotedGridColumn() col.ColumnKey = "tests2" col.FieldKeys = New String() {"costq 5", "costq 6", "costq 7", "costq 8"} col.Name = "Fiscal 2010" col.Width = 100 r.Add(col) Return r End Function
Сериализатор управления JS Grid сериализирует конфигурацию и данные управления JS Grid в строку JavaScriptObjectNotation (JSON). Элемент управления "Сетка" создает строку JSON и помещает ее на страницу.
SerializeDataValue указывает сериализатору выполнить сериализацию фактического значения. SerializeLocalizedValue указывает сериализатору выполнить сериализацию отображаемого или локализованного значения. Рассмотрите дату. Например, дата может быть представлена как "11/2010". Отображаемая дата в формате "месяц/год" значительно отличается от фактического значения даты.
Включение вкладки сводной сетки
Откройте файл JSGridWebPartUserControl.cs
В методе загрузки страницы добавьте сразу же после создания сериализатора сетки следующий код в класс JSGridWebPartUserControl.
gds.EnablePivotedGridPane(GridUtilities.GetPivotedGridColumns(data));gds.EnablePivotedGridPane(GridUtilities.GetPivotedGridColumns(data))
Тестирование веб-части сводной диаграммы
- В Visual Studio нажмите клавишу F5, чтобы запустить проект. Веб-часть будет автоматически добавлена в коллекцию веб-частей SharePoint. Веб-часть можно добавить на любую страницу веб-частей.