Кастомизация
28
Сен
6

Диаграммы

CRM 2011 обзавелся таким замечательным функционалом как Диаграммы. Диаграммы в CRM 2011 основаны на ASP.Net Chart Controls. Визуальный дизайнер диаграмм CRM позволяет создавать только определенные типы диаграмм и в весьма упрощенном виде. Однако, используя SDK Вы можете создавать больше типов диаграмм, которые поддерживаются ASP.Net Chart Controls. Также дополнительные настройки можно производить путем редактирования XML определения Диаграммы, которое можно получить путем экспорта Диаграммы из CRM. Остановимся поподробнее на втором способе, чтобы узнать какие манипуляции мы можем производить для «тонкой» настройки Диаграмм. Но сначала немного теории…

Примечания:

Теория

Диаграммы выводят на экран данные в двух осях: горизонтальная (X) и вертикальная (Y). В CRM ось X называется осью «категорий», а ось Y называется «рядом» (или «серией»). Ось категорий (X) может выводить числовые и нечисловые значения, тогда как ось рядов (Y) может выводить только числовые значения.

Диаграммы в Microsoft Dynamics CRM могут быть двух видов:

  • Одно-серийные диаграммы: выводят значения одной серии (Y), отображенной на значениях категории (X);
  • Мульти-серийные диаграммы: выводят множество серий, отображенных на одной категории.
    XML определение диаграммы состоит из двух частей: данные для диаграммы и отображение данных.

Данные для диаграммы

<datadefinition>
  <fetchcollection>
    <fetch mapping="logical" count="10">
      <entity name="opportunity">
        <attribute name="estimatedvalue" />
        <order attribute="estimatedvalue" descending="true" />
      </entity>
    </fetch>
  </fetchcollection>
  <categorycollection>
    <category>
      <measurecollection>
        <measure alias="estimatedvalue" />
      </measurecollection>
    </category>
  </categorycollection>
</datadefinition>

XML диаграммы содержит два элемента для определения данных для диаграммы:

  • FetchCollection
    В элементе FetchCollection задается FetchXML, для извлечения данных для диаграммы. В FetchXML запросе определяется атрибуты объекта, агрегатные функции и группы для данных диаграммы. Все агрегатные функции FetchXML поддерживаются и для диаграмм.

    FetchXML запрос позволяет фильтровать данные. Кроме того, фильтры применяются для диаграмм посредством Представлений. Поэтому, если в запросе FetchXML (в элементе FetchCollection) будет определен фильтр и дополнительно фильтр применен посредством Представления, то в диаграмме будут отображены данные, после обработки всеми фильтрами.

    Если диаграмма является диаграммой сравнения, то элемент FetchCollection будет содержать два элемента с group by.

    З.Ы. Не забываем, что теперь FetchXML можно создавать с помощью Расширенного поиска.

  • CategoryCollection
    Элемент CategoryCollection содержит информацию о категориях (горизонтальная ось) и рядах (вертикальная ось) в диаграмме.
    • Каждый вложенный элемент Category имеет дочерний элемент MeasureCollection, каждый из которых, в свою очередь, соответствует одному элементу Series в XML описаний отображения данных. У одно-серийной диаграммы имеется единственный дочерний элемент MeasureCollection, тогда как у мульти-серийной будет несколько дочерних элементов MeasureCollection (и столько же элементов Series);
    • У каждого дочернего элемента MeasureCollection есть элемент под названием Measure, который соответствует какому-либо ряду (вертикальная ось) отображенному на каждом значении оси категорий.

Отображение диаграммы

XML-код описывающий отображение диаграммы содержит информацию о таких вещах как:

  • Заголовок диаграммы;
  • Цвет диаграммы;
  • Тип диаграммы (линейчатая, столбец, линейная и т.д.);
  • Легенда;
  • и т.д.

Пример XML определения отображения диаграммы:

<Chart Palette="BrightPastel">
  <Series>
    <Series _Template_="All" Color="153, 204, 255" BorderColor="164, 164, 164" BorderDashStyle="Solid" BorderWidth="1" ShadowColor="128, 128, 128, 128" ShadowOffset="1" IsValueShownAsLabel="true" Font="{0}, 6.75pt" BackGradientStyle="TopBottom" BackSecondaryColor="0, 102, 153" LabelForeColor="100, 100, 100" ChartType="Column">
      <SmartLabelStyle Enabled="True" />
      <Points />
    </Series>
  </Series>
  <ChartAreas>
    <ChartArea _Template_="All" BackColor="White" BorderColor="26, 59, 105" BorderWidth="0" BorderDashStyle="Solid">
      <AxisY LineColor="204, 204, 204" TitleFont="{0}, 8pt, GdiCharSet=0" TitleForeColor="100, 100, 100" LabelAutoFitMaxFontSize="7" LabelAutoFitMinFontSize="7">
        <MajorTickMark LineColor="Gray" />
        <MajorGrid Enabled="false" />
        <LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="100, 100, 100" />
      </AxisY>
      <AxisX LineColor="204, 204, 204" TitleFont="{0}, 8pt, GdiCharSet=0" TitleForeColor="100, 100, 100" LabelAutoFitMaxFontSize="7" LabelAutoFitMinFontSize="7">
        <MajorTickMark LineColor="Gray" />
        <MajorGrid Enabled="false" />
        <LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="100, 100, 100" />
      </AxisX>
    </ChartArea>
  </ChartAreas>
  <Titles>
    <Title _Template_="All" Font="{0}, 9pt, style=Bold, GdiCharSet=0" ForeColor="100, 100, 100"></Title>
  </Titles>
  <BorderSkin PageColor="Control" BackColor="CornflowerBlue" BackSecondaryColor="CornflowerBlue" />
</Chart>

Настройка Диаграмм

Рассмотрим несколько способов дополнительной кастомизации Диаграмм. Все описанный ниже приемы нельзя выполнить через интерфейс CRM. Поэтому Вам необходимо будет выгрузить их из CRM, отредактировать XML-файл и импортировать обратно. Для этого перейдите к диаграмме в Решении и нажмите «Export Chart» вменю Actions. Дальнейшие примеры предполагают, что Вы редактируете XML определение диаграммы…


3D

Чтобы придать диаграмме 3D-объем добавьте тег Area3DStyle внутрь тэга ChartArea.

<ChartArea ...>
  ...
  <Area3DStyle Enable3D="True" />
</ChartArea>


В следующей таблице приведен полный список атрибутов тэга Area3DStyle, которые Вы можете задать:

Атрибут Описание
Enable3D Если = true, то диаграмма становится 3D.
Возможные значения: true или false.
Inclination Устанавливает угол вращения вокруг горизонтальной оси для области 3D диаграммы.
Возможные значения: целочисленное значение от 0 до 360.
IsClustered Определяет, будут ли сгруппированы отдельные ряды данных в линейчатой или столбиковой диаграммах. Т.е. отображаются слитно или раздельно.
Возможные значения: true или false.
IsRightAngleAxes Вывод область диаграммы на экран с использованием изометрической проекции. При использовании IsRightAngleAxes нельзя использовать атрибуты Inclination или Rotation.
Возможные значения: true или false.
LightStyle Устанавливает тип освещения для области 3D диаграммы. Возможные значения:

  • None – не используется освещение;
  • Simplistic – фиксированные оттенки всех элементов диаграммы;
  • Realistic – оттенок изменяется в зависимости от угла вращения.
Perspective Устанавливает процент перспективы для области 3D диаграммы.
Возможные значения: целое число от 0 до 100 процентов.
При использовании атрибута Perspective, атрибут IsRightAngleAxes автоматически устанавливается в false и наоборот.
PointDepth Устанавливает глубину точек данных, выведенных на экран в 3D диаграмме.
Возможные значения: от 0-1000 процентов (дефолтное значение 100 процентов).
Если Вы при этом используете атрибут IsRightAnglesAxes, то это может более или менее повлиять на отображение диаграммы – зависит от типа диаграммы.
PointGapDepth Устанавливает расстояние между рядами в 3D диаграмме.
Возможные значения: от 0-1000 процентов (дефолтное значение 100 процентов).
Если Вы при этом используете атрибут IsRightAnglesAxes, то это может более или менее повлиять на отображение диаграммы – зависит от типа диаграммы.
Rotation Угол вращения вокруг вертикальной оси для 3D диаграмм.
Возможные значения: целочисленное значение от 0 до 360.
WallWidth Устанавливает ширину стенок в 3D диаграмме.
Возможные значения: от 0 до 30 пикселей.

При использовании 3D в диаграммах, следующие функции не будут работать:

  • Scale breaks;
  • Gradients;
  • Scrolling and zooming.

Псевдо 3D

Линейчатые и столбиковые диаграммы

Цилиндр

В тэге Series в атрибуте CustomProperties добавьте или измените параметр DrawingStyle=Cylinder.

Пример:

<Series ChartType="Bar" IsValueShownAsLabel="True" Color="149, 189, 66" BackGradientStyle="TopBottom" BackSecondaryColor="112, 142, 50" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40, DrawingStyle=Cylinder">


Рельеф

В тэге Series в атрибуте CustomProperties добавьте или измените параметр DrawingStyle=Emboss.

Пример:

<Series ChartType="Bar" IsValueShownAsLabel="True" Color="149, 189, 66" BackGradientStyle="TopBottom" BackSecondaryColor="112, 142, 50" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40, DrawingStyle=Emboss">


От светлого к темному

В тэге Series в атрибуте CustomProperties добавьте или измените параметр DrawingStyle=LightToDark.

Пример:

<Series ChartType="Bar" IsValueShownAsLabel="True" Color="149, 189, 66" BackGradientStyle="TopBottom" BackSecondaryColor="112, 142, 50" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40, DrawingStyle=LightToDark">


Клин

В тэге Series в атрибуте CustomProperties добавьте или измените параметр DrawingStyle=Wedge.

Пример:

<Series ChartType="Bar" IsValueShownAsLabel="True" Color="149, 189, 66" BackGradientStyle="TopBottom" BackSecondaryColor="112, 142, 50" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40, DrawingStyle=Wedge">


Круговые и кольцевые диаграммы

Вогнутая поверхность

В тэге Series в атрибуте CustomProperties добавьте или измените параметр PieDrawingStyle=Concave.

Пример:

<Series ShadowOffset="0" IsValueShownAsLabel="True" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PieLabelStyle=Inside, PieDrawingStyle=Concave" ChartType="pie">


Мягкие края

В тэге Series в атрибуте CustomProperties добавьте или измените параметр PieDrawingStyle= SoftEdge.

Пример:

<Series ShadowOffset="0" IsValueShownAsLabel="True" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PieLabelStyle=Inside, PieDrawingStyle=SoftEdge" ChartType="pie">


Кольцевая диаграмма

В тэге Series измените атрибут ChartType=»Doughnut».

Пример:

<Series ShadowOffset="0" IsValueShownAsLabel="True" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PieLabelStyle=Inside, PieDrawingStyle=Default" ChartType="Doughnut">


Воронка

Квадратное сечение

В тэге Series в атрибуте CustomProperties добавьте или измените параметр Funnel3DDrawingStyle=SquareBase.

Пример:

<Series ShadowOffset="0" IsValueShownAsLabel="true" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" ChartType="Funnel" CustomProperties="FunnelLabelStyle=Outside, FunnelNeckHeight=0, FunnelPointGap=1, FunnelNeckWidth=5, Funnel3DDrawingStyle=SquareBase">


Горлышко

Воронки можно заставить выглядеть более похожими на классические бытовые воронки, путем добавления горлышка 🙂 В тэге Series в атрибуте CustomProperties добавьте или измените параметр FunnelNeckHeight=8. Где числовое значение это высота горлышка.

Пример:

<Series ShadowOffset="0" IsValueShownAsLabel="true" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" ChartType="Funnel" CustomProperties="FunnelLabelStyle=Outside, FunnelNeckHeight=8, FunnelPointGap=1, FunnelNeckWidth=5">


YIsWIDTH

Этот параметр указывает диаграмме, что радиус трубы в каждой точке стыковки сегментов должен зависеть от числового значения в этой точке. Чтобы задать его, в тэге Series в атрибуте CustomProperties добавьте или измените параметр FunnelStyle=YIsWidth.

Пример:

<Series ShadowOffset="0" IsValueShownAsLabel="true" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" ChartType="Funnel" CustomProperties="FunnelLabelStyle=Outside, FunnelNeckHeight=0, FunnelPointGap=1, FunnelNeckWidth=5, FunnelStyle=YIsWidth">


YIsHeight

Этот параметр указывает диаграмме, что высота каждого сегмента должна зависеть от числового значения, которое представляет данный сегмент. Чтобы задать его, в тэге Series в атрибуте CustomProperties добавьте или измените параметр FunnelStyle=YIsHeight.

Пример:

<Series ShadowOffset="0" IsValueShownAsLabel="true" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" ChartType="Funnel" CustomProperties="FunnelLabelStyle=Outside, FunnelNeckHeight=0, FunnelPointGap=1, FunnelNeckWidth=5, FunnelStyle=YIsHeight">


Метки

Форматирование

Для изменения формата надписи выводимой над данными нужно отредактировать атрибут LabelFormat тэга Series. Как то так:

<Series ShadowOffset="0" IsValueShownAsLabel="true" LabelFormat="'$'#,0;(#,0)" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" ChartType="Funnel" CustomProperties="FunnelLabelStyle=Outside, FunnelNeckHeight=0, FunnelPointGap=1, FunnelNeckWidth=5">

Примеры форматирования LabelFormat:

  • Удаление десятичных чисел и знака валюты из Диаграммы: #,0;(#,0)
  • Добавление знака $ к метке: ‘$’#,0;(#,0)
  • Отображение двух десятичных знаков: F2



Другие примеры:

  • $3 million: $0,, million
  • $500 K: $0, K
  • $1,000,000.00: C
  • $1,000,000: C0
  • Oct 12, 2006: MMM dd, yyy
  • October 12, 2006 12:00 AM: f

Все правила форматирования Вы можете посмотреть здесь:

Данные

Иногда может потребовать на диаграмме вместо количества показать процентное соотношение.

Для этого нужно в тэг Series добавить атрибут Label со значением: #PERCENT

Например:

<Series Label="#PERCENT" LabelFormat="#0,##%" ShadowOffset="0" IsValueShownAsLabel="True" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PieLabelStyle=Inside, PieDrawingStyle=Default" ChartType="pie">

А чтобы задать значение секции + процент: #VALX (#PERCENT)

З.Ы. При этом также нужно задать, LabelFormat иначе метки не изменятся.



Более подробно про возможности отображения меток смотрите:
http://blogs.msdn.com/b/alexgor/archive/2008/11/11/microsoft-chart-control-how-to-using-keywords.aspx

Метки Оси

Для изменения формата меток для осей нужно добавить/отредактировать атрибут Format в тэг LabelStyle.

В следующем примере числа для оси будут группировать до тысячных (и добавлена буква F в конце): $0,F

<LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" Format="$0,F" />


Об остальных способах задать формат осей читайте в: http://msdn.microsoft.com/en-us/library/0c899ak8.aspx

Скрытие меток

Чтобы скрыть числовые метки, отображающиеся непосредственно на графике, нужно в тэг Series добавить/изменить тэг IsValueShownAsLabel=»False».

Например:

<Series IsValueShownAsLabel="False" Color="55, 118, 193" BackGradientStyle="TopBottom" BackSecondaryColor="41, 88, 145" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40">


Легенда

Имена легенды (и рядов)

Диаграммы в CRM 2011 основаны на полях объекта и следовательно они отражают их имя (и агрегацию по ним) в имени ряда. Например, Сумма по Фактическому или Предполагаемому доходу и т.д.

Однако, можно настроить отображение имен рядов (в том числе в легенде) с использованием пиклистов. Чтобы изменить имя ряда, нужно добавьте в тэг Series в таком формате:

Name="o:имяобъекта_имяпиклиста,числовоеЗначениеПиклиста"

Например, так:

<Series Name="o:opportunity_statuscode,4" Color="168,203,104" BackGradientStyle="TopBottom" BackSecondaryColor="126,153,79" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40">


Сортировка легенды

У тэге Legend в Xml-определении диаграммы есть атрибут LegendItemOrder, который может принимать три значения:

  • Auto;
  • SameAsSeriesOrder – в соответствии с порядком серий (если перетасовать серии в XML-определении, то и порядок изменится);
  • ReversedSeriesOrder – метки легенды будут располагаться обратно порядку серий.

Пример:

<Legend LegendItemOrder="SameAsSeriesOrder" Alignment="Center" LegendStyle="Table" Docking="right" IsEquallySpacedItems="True" Font="{0}, 11px" ShadowColor="0, 0, 0, 0" ForeColor="59, 59, 59" />


Сетка

Настройки сетки задаются с помощью тэгов MajorGrid и MajorTickMark в тегах AxisY и AxisX.

Первый задает цвет линий, а второй цвет маркеров на осях. Цвет задается в атрибуте LineColor в формате RGB (или можно указать ключевое слово Transparent, чтобы сделать их прозрачными).

Пример:

<AxisY LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181" IntervalAutoMode="VariableCount">
  <MajorTickMark LineColor="226, 0, 16" />
  <MajorGrid LineColor="115, 136, 220" />
  <LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
</AxisY>


З.Ы. Отключить сетку или маркеры можно с помощью атрибута Enabled=»False».

Данные

Цвет секций

Цвета диаграммы задются в тэге Chart в атрибуте PaletteCustomColors. Примерно так:

<Chart Palette="None" PaletteCustomColors="55,118,193; 197,56,52; 149,189,66; 117,82,160; 49,171,204; 255,136,35; 97,142,206; 209,98,96; 168,203,104; 142,116,178; 93,186,215; 255,155,83">

Цвета, которые перечислены в PaletteCustomColors, представлены в формате RGB. Перечисленные цвета будут применены последовательно к списку значений, задействованному для отображения на диаграмме. Каждый цвет состоит из трех чисел (по одному числу на цвет) разделенных запятыми. Соответственно, просто меняете RGB определение цвета, и он изменится на Диаграмме.


Примечания:

  • Готовые цвета можете подсмотреть на сайте: http://cloford.com/resources/colours/500col.htm;
  • Если ВЫ хотите узнать цвет какого-либо элемента на Вашем экране, то можете воспользоваться встроенным в IE DevToolBar инструментом Color Picker. Чтобы открыть его: F12 — Tools — Show Color Picker. А дальше просто наводите на нужный элемент интерфейса, а Color Picker покажет числовое значение его цвета.

Сортировка

Допустим, имеется график, отображающий прибыли по Возможным сделкам в разрезе клиентов. По дефолту они будут отсортированы как угодно. Чтобы отсортировать набор столбцов нужно добавить тэг Order внутрь Fetch-запроса, рядом с тэгами attribute. В тэге Order нужно указать атрибут alias и указать в нем значение alias’а какого-либо атрибута, по которому следует производить сортировку. Также в тэге order нужно указать атрибут descending (с true или false) для указания направления сортировки.

Например, так:

<entity name="opportunity">
  <attribute groupby="true" alias="_CRMAutoGen_groupby_column_Num_0" name="customerid" />
  <attribute alias="_CRMAutoGen_aggregate_column_Num_0" name="actualvalue" aggregate="sum" />
  <order alias="_CRMAutoGen_aggregate_column_Num_0" descending="false" />
</entity>


Масштабирование оси

Иногда на столбиковых диаграммах величина выводимых значений настолько разница, что невозможно более мене точно определить мелкие значения, глядя на график.
Чтобы «компенсировать» разницу между маленькими и большими значениями данных можно заставить диаграмму показывать как бы два диапазона на шкале. Точнее диапазон будет один, но в нем будет «разрыв» между непрерывными значениями.

Чтобы добавить разрыв в диапазон значений, нужно добавить тэг ScaleBreakStyle в тэг AxisY или AxisX. Например, так:

<AxisY LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181" IntervalAutoMode="VariableCount">
  <MajorGrid LineColor="239, 242, 246" />
  <MajorTickMark LineColor="165, 172, 181" />
  <LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
  <ScaleBreakStyle Enabled="True" BreakLineStyle="Straight" Spacing="2" />
</AxisY>


З.Ы. Есть несколько условий, в которых разрыв диапазона значений не поддерживается. Более подробно читайте в: http://msdn.microsoft.com/en-us/library/dd455709.aspx

Одна ось вместо двух

При добавлении второй серии в диаграмму автоматически появляется вторая шкала значений, что при одинаковых величинах измерения не позволяет сопоставить отображаемую информацию. Чтобы изменить такое поведение и заставить график отображать информацию по одной шкале в XML-определение найдите тэг Series, внутри которого будут перечислены ряды, задействованные на диаграмме. В одно из тэгов Series вы найдете такой атрибут YAxisType – удалите его.

<Series ChartType="Column" IsValueShownAsLabel="True" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40" YAxisType="Secondary">


З.Ы. Когда в диаграмме используется более чем с двумя рядами, третий и последующие ряды будут использовать шкалу первого ряда. Чтобы заставить какой-либо из них использовать атрибут YAxisType = «Secondary» в соответствующий тэг Series в XML-определении диаграммы.

Комментарии (6)
  • Roman 28.09.2012

    Спасибо, разложено всё по полочкам!

  • Кирилл 28.09.2012

    Подскажите, как скрыть подсказки, появляющиеся при наведение мышки на столбцы диаграммы. Заранее спасибо!

  • Михаил 28.09.2012

    спасибо за статью!
    есть дополнительный вопрос, как скрыть ненужные системные диаграммы или удалить?

  • slivka_83 28.09.2012

    Вроде никак. Точнее сейчас никак. Многие на это жалуется — походу это баг новых версий. Раньше была возможность хотя бы их деактивировать.

  • Postal 28.09.2012

    Добрый день!
    Подскажите, а можно выводить свои подписи в легенде?

  • slivka_83 28.09.2012

    Добрый 🙂
    Точно не подскажу. Можете поискать здесь: https://crmchartguy.wordpress.com/
    тут много примеров всяких, может и ваш есть…

*

code