Обзор:
(ОБНОВЛЕНИЕ 12/04/07: В конце ссылки на другой блог, который решает эту проблему через очень интересный веб-часть добавлен еще один интересный ресурс)
Эта запись в блоге описывает как создать гистограмму в SharePoint. Это работает в средах с WSS и MOSS, как это только зависит от веб-части представления данных.
Общий подход заключается в следующем:
- Создать список или библиотеку документов, содержащую данные вы хотите, чтобы график.
- Место связанный документ Библиотека / настраиваемого списка на страницу и преобразовать его в веб-части представления данных (DVWP).
- Измените DVWP XSL для создания HTML-кода, который показывает как граф.
Бизнес-сценарий / Установка:
Я создал пользовательский список в столбце стандартный заголовок и один дополнительный столбец, «Статус». Этой модели (очень упрощенно) «Разрешение на счет" сценарий, где название представляет проект и статус значение из списка:
- Предлагаемые
- В процессе
- Тупик
Цель-производить Интерактивный горизонтальный гистограмма, которая показывает эти коды статуса.
Я заполняется список, и это выглядит так:
Создайте веб-часть представления данных:
Создавать DVWP путем добавления настраиваемого списка на страницу (страница сайта в моем случае) и следуйте инструкциям Здесь (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
В дополнение к просто создавать DVWP, нам также необходимо задать свойство подкачки для отображения всех доступных строк. Для меня, Это выглядит примерно так:
В этой точке, Я всегда закрывать SPD и браузера. Затем я снова открыть страницу с помощью браузера. Это позволяет избежать случайного отводом вверх веб-части макет на странице.
Изменить XSLT:
Теперь пора изменить XSLT.
Я всегда использовать visual studio для этого. (См. Здесь для важное примечание о intellisense, которые помогут вам много).
Создать пустой проект, я добавить четыре новых файлов (заменить слова «оригинал" и «New" При необходимости):
- Original.XSLT
- New.XSLT
- Оригинальные Params.xml
- Новые Params.xml
В моем случае, Он выглядит следующим образом:
Изменить веб-часть и скопируйте params и XSL на «оригинал" версия в Visual Studio.
Цель здесь заключается в том, чтобы вызвать XSL для преобразования результатов, которые мы получаем обратно от DVWP запроса в HTML-код, отображаемый как граф.
С этой целью, Это помогает сначала рассмотреть, что HTML должен выглядеть, прежде чем мы запутаться, безумие, которая известна как «XSL». (Чтобы быть ясно, Ниже приведен лишь в качестве примера; не введите или скопируйте в visual studio. Я предоставить полный удар отправной точкой для этого позже в рецензии). На следующем графике образец подготавливается к просмотру как HTML-код сразу после:
Соответствующий HTML:
<HTML> <тело> <центр> <ширина стола = 80%> <TR><ТД><центр>Горизонтальные гистограммы</ТД></TR> <TR> <выровнять TD = «центр»> <границы таблицы = "1" Ширина = 80%> <TR> <Ширина TD = 10%>Открытые</ТД> <ТД><Таблица cellpadding ="0" CellSpacing ="0" граница = 0 ширина = 50%><TR bgcolor = красный><ТД> </ТД></TR></Таблица></ТД> </TR> <TR> <Ширина TD = 10%>Закрыто</ТД> <ТД><Таблица cellpadding ="0" CellSpacing ="0" граница = 0 ширина = 25%><TR bgcolor = красный><ТД> </ТД></TR></Таблица></ТД> </TR> <TR> <Ширина TD = 10%>Тупик</ТД> <ТД><Таблица cellpadding ="0" CellSpacing ="0" граница = 0 ширина = 25%><TR bgcolor = красный><ТД> </ТД></TR></Таблица></ТД> </TR> </Таблица> </ТД> </TR> </Таблица> </тело> </HTML> |
Я использовал мертвым простой подход к созданию моего баров, установив цвет фона строки «красный».
Вынос вот это: В конце концов, все, что мы делаем является создание HTML со строками и столбцами.
Шаблон XSLT:
Я скопировал XSLT, который создает горизонтальную гистограмму. Это довольно хорошо прокомментировал, так что я не добавить много здесь за исключением эти примечания:
- Я начал с по умолчанию XSL, что SharePoint Designer дал мне, когда я впервые создал DVWP.
- Я был в состоянии сократить это от SPD 657 линии для 166 линии.
- Я не возиться с XML-файл параметров (который является отдельным от XSL и вы будете знать, что я имею в виду, когда вы идете изменить сам DVWP; есть два файла, которую можно изменить). Однако, для того, чтобы упростить его, Я удалить почти все из них от XSL. Это означает, что если вы хотите, чтобы использовать эти параметры, Вам просто нужно добавить их определений переменных XSL. Это будет легко, так как вы будете иметь оригинальный определения переменных XSL в проекте visual studio.
- Вы должны иметь возможность копировать и вставлять это прямо в свой проект visual studio. Затем, удалить мои звонки и вставьте ваши собственные вызовы на «ShowBar».
- Детализация работает путем создания <href> Типа того: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. Этот метод может иметь значение в других контекстах. На первый взгляд, Я думал, что мне было бы нужно соответствовать формату более сложных: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, но в моей среде это не обязательно. URL-адрес списка передается нам по SharePoint, так что это довольно легко обобщать.
Вот это:
<XSL:Таблица стилей Версия="1.0" исключать результат префиксы="RS z o s ddwrt dt msxsl" |
Результаты:
XSL сверху создает этот граф:
Детализацию базовых данных, нажав на код состояния:
Заключительные мысли:
Это может быть обобщена?
Я люблю этот графический концепции, но я ненавижу тот факт, что я должен идти и делать столько ручного кодирования. Я дал немного подумал ли она может быть обобщена и я настроен оптимистично, но я также немного страшно, что может быть кирпичная стена где-то по пути, который не будет предлагать любые работы вокруг. Если кто имеет некоторые хорошие идеи по этому, Пожалуйста, обратите в комментариях или Напишите мне.
Вертикальные графики:
Это горизонтальные гистограммы. Это конечно возможно для создания вертикальных граф. Нам просто нужно изменить HTML. Я хотел бы начать так же: Создайте HTML-представление вертикальной гистограммы и затем выяснить, как получить это через XSL. Если кто заинтересован в том, что, Я мог бы убедить попробовать его и работать изломы. Если кто-то уже сделано, пожалуйста, дайте мне знать, и я с удовольствием ссылку на свой блог 🙂
Я думаю, что проблема с вертикальной графе, что этикетки для графа сложнее управлять, но определенно не невозможно.
Поле имя Гоча:
Есть по крайней мере две вещи следует остерегаться с именами полей.
Первый, должна быть имя поля с пробелом в XSL. Вероятно, это будет вопрос здесь:
<XSL:переменная имя="totalProposed"
Выберите="количество(/dsQueryResponse/строк/строки[нормализовать пространства(@Status) = «Предложил»])" />
Если ваш статус"" на самом деле столбец назван «код состояния" Затем вам необходимо сослаться на него как «Status_x0020_Code»:
<XSL:переменная имя="totalProposed"
Выберите="количество(/dsQueryResponse/строк/строки[нормализовать пространства(@Status_x0020_Code) = «Предложил»])" />Второй, и я немного нечеткой на этом, но вы также должны быть начеку для изменения имени поля. Если имя поля «Код состояния" а потом на, переименовать его в «AFE статуса», «внутреннее имя" не изменяется. Внутреннее имя будет по-прежнему «код состояния" и должны быть привязаны как «Status_x0020_Code». «Другие ресурсы" ссылки могут помочь диагностировать и исправить такого рода проблемы.
О что цвет:
Я выбрал «красный" потому что это приятно для меня на данный момент. Не было бы большое дело для отображения различных цветов, с тем чтобы обеспечить больше, чем просто визуального описания ряда, но также предоставлять Полезные КПИ. Например, Если процент «тупик" AFE является > 10% Затем показывают красный, в противном случае показать его в черном. Использование <XSL:выбрать> для достижения этой цели.
Другие ресурсы:
- Определяет внутреннее имя (и другие хорошая информация) для данных в списке: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Показать все данные, предоставляемые SharePoint (необработанный XML): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- Получить выражение XPATH определенного столбца: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- Другой подход, с помощью OWA(?). Я не вырыли в его, но выглядит многообещающим, особенно для круговых диаграмм: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
Счастливые преобразование!
<конец />