Создайте бар графики в SharePoint

17 Ответы

Обзор:

(ОБНОВЛЕНИЕ 12/04/07: В конце ссылки на другой блог, который решает эту проблему через очень интересный веб-часть добавлен еще один интересный ресурс)

Эта запись в блоге описывает как создать гистограмму в SharePoint. Это работает в средах с WSS и MOSS, как это только зависит от веб-части представления данных.

Общий подход заключается в следующем:

  1. Создать список или библиотеку документов, содержащую данные вы хотите, чтобы график.
  2. Место связанный документ Библиотека / настраиваемого списка на страницу и преобразовать его в веб-части представления данных (DVWP).
  3. Измените 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 = красный><ТД>&nbsp;</ТД></TR></Таблица></ТД>
</TR>
<TR>
<Ширина TD = 10%>Закрыто</ТД>
<ТД><Таблица cellpadding ="0" CellSpacing ="0" граница = 0 ширина = 25%><TR bgcolor = красный><ТД>&nbsp;</ТД></TR></Таблица></ТД>
</TR>
<TR>
<Ширина TD = 10%>Тупик</ТД>
<ТД><Таблица cellpadding ="0" CellSpacing ="0" граница = 0 ширина = 25%><TR bgcolor = красный><ТД>&nbsp;</ТД></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" 
 xmlns:msxsl="Урна:схемы microsoft-com:XSLT" xmlns:XSL="HTTP://www.w3.org/ 1999/XSL/преобразование" 
 xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="HTTP://schemas.microsoft.com/WebParts/v2/DataView/designer" 
 xmlns:ASP="HTTP://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt="HTTP://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
 xmlns:o="Урна:схемы microsoft-com:Управление" xmlns:s="UUID:BDC6E3F0-6DA3-11D1-A2A3-00AA00C14882" 
 xmlns:DT="UUID:C2F41010-65B3 - 11d 1-A29F-00AA00C14882" xmlns:RS="Урна:схемы microsoft-com:набор строк" xmlns:z="#RowsetSchema" 
 xmlns:ddwrt2="Урна:FrontPage:внутренние">
  <XSL:выход метод="HTML" отступ="нет" />
  <XSL:десятичный формат NaN="" />
  <XSL:Param имя="ListUrlDir"></XSL:Param> <!-- Мне нужно это для поддержки бур вниз.  -->

  <XSL:шаблон матч="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
 xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP="HTTP://schemas.microsoft.com/ASPNET/20">
    <XSL:переменная имя="dvt_StyleName">Таблица</XSL:переменная>
    <XSL:переменная имя="Строк" Выберите="/dsQueryResponse/строк/строки" />
    <XSL:переменная имя="dvt_RowCount" Выберите="количество($Строк)" />
    <XSL:переменная имя="IsEmpty" Выберите="$dvt_RowCount = 0" />
    <XSL:переменная имя="dvt_IsEmpty" Выберите="$dvt_RowCount = 0" />

    <XSL:выбрать>
      <XSL:когда тест="$dvt_IsEmpty">
        Нет данных для диаграммы!<br/>
      </XSL:когда>
      <XSL:в противном случае>

        <!--
          Интересные вещи начинается здесь.

          Нам нужно определить пары переменных для каждой строки в графе: Общее количество элементов и процентов от общего числа.
        -->
        <XSL:переменная имя="totalProposed" Выберите="количество(/dsQueryResponse/строк/строки[нормализовать пространства(@Status) = «Предложил»])" />
        <XSL:переменная имя="percentProposed" Выберите="$totalProposed div $dvt_RowCount" />

        <XSL:переменная имя="totalInProcess" Выберите="количество(/dsQueryResponse/строк/строки[нормализовать пространства(@Status) = ' Процесс'])" />
        <XSL:переменная имя="percentInProcess" Выберите="$totalInProcess div $dvt_RowCount" />

        <XSL:переменная имя="totalStalled" Выберите="количество(/dsQueryResponse/строк/строки[нормализовать пространства(@Status) = «Тупик»])" />
        <XSL:переменная имя="percentStalled" Выберите="$totalStalled div $dvt_RowCount" />

        <!--
          Мы определяем наши HTML-таблицы.  Я заимствование от некоторых стандартных стилей SharePoint здесь, чтобы сделать его совместимым.  Я думаю, что это будет честь изменения в глобальной css-файл также, как тема переопределяет.
        -->
        <Таблица Ширина="100%" CellSpacing="0" CellPadding="2"
стиль="границы право: 1 твердых #C0C0C0; нижней границы: 1 твердых #C0C0C0; стиль границы слева: твердые; Ширина левой границы: 1; границы Топ стиль: твердые; Ширина верхней границы: 1;">

           <TR>
            <ТД Выравнивание="центр">
              <Таблица граница="1" Ширина="100%">

                <!--
                  Для каждого статуса, который мы хотим построить график, Мы называем «ShowBar" шаблон.
                  Мы передаем его:
                  1. Метка строки.  Это превращается в гиперссылку.
                  2. Процент (переменная с выше).
                  3. Имя поля кода из базового списка.  Это не должны совпадать с меткой дисплей.
                  4. Значение поля соответствия для #3.
                  5. Всего элементов этого кода состояния (не итог всех кодов состояния).

                  Он испускает <TR></TR> и линии горизонтальной гистограммы.

                  Мы называем этот шаблон для каждого кода состояния, которые мы хотим посмотреть.
                -->
                <XSL:вызов шаблон имя="ShowBar">
                  <XSL:с param имя="BarDisplayLabel" Выберите="«Предложил»"/>
                  <XSL:с param имя="BarPercent" Выберите="$percentProposed"/>
                  <XSL:с param имя="QueryFilterFieldName" Выберите="«Статус»"/>
                  <XSL:с param имя="QueryFilterFieldValue" Выберите="«Предложил»"/>
                  <XSL:с param имя="TotalItems" Выберите="$totalProposed"></XSL:с param>
                </XSL:вызов шаблон>

                <XSL:вызов шаблон имя="ShowBar">
                  <XSL:с param имя="BarDisplayLabel" Выберите="«В тупике»"/>
                  <XSL:с param имя="BarPercent" Выберите="$percentStalled"/>
                  <XSL:с param имя="QueryFilterFieldName" Выберите="«Статус»"/>
                  <XSL:с param имя="QueryFilterFieldValue" Выберите="«В тупике»"/>
                  <XSL:с param имя="TotalItems" Выберите="$totalStalled"></XSL:с param>
                </XSL:вызов шаблон>

                <XSL:вызов шаблон имя="ShowBar">
                  <XSL:с param имя="BarDisplayLabel" Выберите="«В процессе»"/>
                  <XSL:с param имя="BarPercent" Выберите="$percentInProcess"/>
                  <XSL:с param имя="QueryFilterFieldName" Выберите="«Статус»"/>
                  <XSL:с param имя="QueryFilterFieldValue" Выберите="«В процессе»"/>
                  <XSL:с param имя="TotalItems" Выберите="$totalInProcess"></XSL:с param>
                </XSL:вызов шаблон>

              </Таблица>
            </ТД>
          </TR>
        </Таблица>
      </XSL:в противном случае>
    </XSL:выбрать>
  </XSL:шаблон>

  <!--
    Этот шаблон выполнит работу отображения отдельных линий в гистограмме.

    Вы, вероятно, сделать большую часть вашего настройки здесь.
  -->
  <XSL:шаблон имя="ShowBar">
    <XSL:Param имя="BarDisplayLabel" /> <!-- Метка, чтобы показать -->
    <XSL:Param имя="BarPercent"/> <!-- Процент от общего числа. -->
    <XSL:Param имя="QueryFilterFieldName"/> <!-- Используется для перехода к запросу & фильтр -->
    <XSL:Param имя="QueryFilterFieldValue"/> <!-- Используется для перехода к запросу & фильтр -->
    <XSL:Param имя="TotalItems" /> <!-- Общее количество этого barlabel -->

    <TR>

      <!-- Метка сама. -->
      <ТД класс="MS-formbody" Ширина="30%">

        <!--
          Это следующий набор инструкций строит строку запроса, что позволяет детализировать отфильтрованного представления базовых данных.
          Мы делаем использовать несколько вещей здесь:
          1. Мы можем передать FilterField1 и FilterValue1 в списке, чтобы отфильтровать по столбцу.
          2. SharePoint передача параметра key нам, ListUrlDir, который указывает в базовый список, против которого этот DVWP «работает».

          Не весело XSL?
        -->
        <XSL:текст disable-output-escaping="Да">
        <![CDATA[<a href ="]]></XSL:текст>
        <XSL:Стоимость от Выберите="$ListUrlDir"/>
        <XSL:текст disable-output-escaping="Да"><![CDATA[?FilterField1 =]]></XSL:текст>
        <XSL:Стоимость от Выберите="$QueryFilterFieldName"/>
        <XSL:текст disable-output-escaping="Да"><![CDATA[&FilterValue1 =]]></XSL:текст>
        <XSL:Стоимость от Выберите="$QueryFilterFieldValue"/>
        <XSL:текст disable-output-escaping="Да"><![CDATA[">]]></XSL:текст>
        <XSL:Стоимость от Выберите="$BarDisplayLabel"/>
        <XSL:текст disable-output-escaping="Да"><![CDATA[</в>]]></XSL:текст>

        <!-- Следующий бит показывает некоторые цифры в формате: "(Итого / % от общего числа)" -->
        (<XSL:Стоимость от Выберите="$TotalItems"/> /

        <!-- Это создает хороший процент метку для нас.  Спасибо, Microsoft! -->
        <XSL:вызов шаблон имя="percentformat">
          <XSL:с param имя="процент" Выберите="$BarPercent"/>
        </XSL:вызов шаблон>)

      </ТД>

      <!-- Наконец, выделяют <ТД> тег для бара сам.-->
      <ТД>
        <Таблица CellPadding="0" CellSpacing="0" граница="0"
Ширина="{раунд($BarPercent * 100)+1}%">
          <TR bgcolor="красный">
            <XSL:текст disable-output-escaping="Да"><![CDATA[&nbsp;]]></XSL:текст>
          </TR>
        </Таблица>
      </ТД>
    </TR>

  </XSL:шаблон>

  <!-- Это взято непосредственно из некоторых XSL, я нашел в шаблоне MS. -->
  <XSL:шаблон имя="percentformat">
    <XSL:Param имя="процент"/>
    <XSL:выбрать>
      <XSL:когда тест="номер формата($процент, '#,##0%;-#,##0%')= «NaN»">0%</XSL:когда>
      <XSL:в противном случае>
        <XSL:Стоимость от Выберите="номер формата($процент, '#,##0%;-#,##0%')" />
      </XSL:в противном случае>
    </XSL:выбрать>
  </XSL:шаблон>

</XSL:Таблица стилей>

Результаты:

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:выбрать> для достижения этой цели.

Другие ресурсы:

Счастливые преобразование!

<конец />

Подписаться на мой блог!

17 мысли о «Создайте бар графики в SharePoint”

  1. Крис B

    Эта страница почти завершила выполнение задачи, которую я искал.

    У меня есть группа, которая хочет использовать список в опросе SharePoint для создания опрос. Улов? Они не хотят, чтобы увидеть код… Или изменить систему каждый раз, когда они посылают опрос (запланированных на еженедельное обновление).

    Я был в состоянии подключиться это в список опроса и создать граф в первом столбце ответ. Хотя я не могу предсказать являются ценности и метки, которые они должны будут двигаться вперед. Чтобы сделать хуже, они могут иметь более или менее ответы доступны каждую неделю.

    Я буду смотреть в другом месте на всякий случай, но кто-нибудь нашел способ для создания строк и этикетки, основан офф количество имеющихся вариантов и динамически установив эти вместо жесткого кодирования ожидаемые значения?

    Ответ ↓
  2. Грег Laushine

    Спасибо Павел. Очень полезно. Благодаря вашей работе, Я был в состоянии добавить столбец бар графа в существующих DVWP (Например. для задач) очень легко с помощью нескольких строк кода.
    В SharePoint Designer, Я вставить представление данных с заголовком и % заполните столбцы из списка задач. Я поместить курсор в одной из ячеек и щелкните правой кнопкой мыши. Я выберите Вставить столбец справа. В представлении «Код», Я нашел <ТД> и заменить <XSL:элемент текста внутри ячейки с вашим кодом:
    <Таблица cellpadding ="0" CellSpacing ="0" границы ="0"
    ширина = "{раунд(@PercentComplete * 100)+1}%">
    <TR стиль = "цвет фона:красный»>
    <XSL:текст disable-output-escaping = «yes»><![CDATA[&nbsp;]]></XSL:текст>
    </TR>
    </Таблица>

    Примечание, я изменил код цвета строк от bgcolor = "red" стиль = "цвет фона:красный"
    Также, была возможность выбрать один из столбцов в моем списке (@PercentComplete) вместо» $BarPercent"
    Грег

    Ответ ↓
  4. Вольфганг
    Пол, Спасибо за это! Я создал точную копию того, что вы сделали, и он работает почти идеальный. Там была одна крошечная проблема в строке 2-й пункт вашего кода:
    <XSL:шаблон матч = "/" xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:__designer =http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:ASP ="http://schemas.microsoft.com/ASPNET/20"&gt;
    Вам нужно поставить http://schemas.microsoft.com/WebParts/v2/DataView/designer в кавычки.
    После того, как я исправить, что он работает как шарм! Я теперь будет адаптировать это мой собственный список и статус, но я уверен, что это не будет трудно. (Я буду размещать результат)
    Еще раз спасибо
    ~ Шерстяная
    Ответ ↓
  5. Без имени
    вопрос –
    Что делать, если в моем графике, я хотел переменной не только рассчитывать один статус, но рассчитывать несколько из них?
    Таким образом, Например, что делать, если я имел —
    <XSL:Переменная name = "RequestsInitialized"
    Выберите = "граф(/dsQueryResponse/строк/строки[нормализовать пространства(@Status)= «WIP»])" />
    –Дело в том, Я хочу это количество экземпляров «WIP», но я также хочу эту переменную, чтобы считать что-то еще как «Ожидающие рецензии».. как бы это сделать?
    Спасибо!
    Ответ ↓
  6. Мерти Шрирангам
    Привет Павел,
    IAM очень это действительно большие усилия вы. Можете ли вы объяснить, где бы разместить этот код. Я создал prjoect с четырех новых файлов. Затем вы можете объяснить более подробно то, что я должен делать.
    Спасибо
    Мерти
    Ответ ↓
  8. Эндрю Каррингтон
    Привет, Я пытался это немного изменить таким образом, чтобы он отображает график задач в списке задач пользователя информации. Он использует столбец под названием @AssignedTo которая является столбцом присутствие пользователя. Я могу получить его для отображения отображаемого HTML-кода, но не могу получить его для вычисления и отображения значений.
    Любые идеи?
    Спасибо
    Энди
    Ответ ↓
  9. Написал Патрик Luca:
    Привет Павел,
    Великий пост!
    Вопрос:
    Я хотел бы для фильтрации по два поля в то же время: как этого достичь?
    Например, один из ваших переменных называется totalStalled и это фильтры на @Status.
    Я хотел бы для фильтрации в то же время сократить мои количество возвращаемых записей на другое поле.
    Я уже нашел, как сделать «OR», но я donnot удается найти ' и’
    ' Или’ может быть достигнуто как это:
    <XSL:Переменная name = "totalStalled" Выберите = "граф(/dsQueryResponse/строк/строки[нормализовать пространства(@Status) = «Тупик»] | /dsQueryResponse/строк/строки[нормализовать пространства(@ExtraFilterField) = «value»])" />
    Ответ ↓
  15. Робин Meuré

    Привет Павел!

    Nice работы! У меня также было что-то вроде этого, на мой взгляд, чтобы просмотреть списки SharePoint в графическом виде 😉

    Ответ ↓
  16. Фрэнк

    У меня есть «Использование панелей в SharePoint’ вопрос. Мы военный госпиталь, используя стандарт MOSS для нашего Intranet и хотел бы построить панель для нашей команды группы, чтобы увидеть «в режиме реального времени’ Если это возможно. Одна из главных точек просмотра в режиме реального времени текущей рабочей нагрузки в рамках Фонда и буквально смотреть его изменить вверх и вниз (может потребоваться нажать “обновить”/F5).

    Спасибо заранее,

    Ответ ↓
    1. Пол Galvin сообщение автор

      Вы можете сделать что-нибудь полезное с jQuery для достижения этого эффекта. Мне на электронную почту Galvin.Paul@Gmail.com и я буду счастлив, чтобы попытаться дать руку.

      Ответ ↓

Оставь ответ

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *