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

Смотреть пример графиков и диаграмм

Отдельный режим работы компонента Таблица. 

Позволяет выводить графики и диаграммы

1. в SELECT 3 GetItems ставим ViewType='chart' и настраиваем следующие параметры:

   1. ChartType - тип диаграммы line, bar, pie, radar (и некоторые другие типы из https://www.chartjs.org/docs/latest/),
   2. ChartTitle - заголовок диаграммы,
   3. ChartWidth, ChartHeight - ширина и высота (если поставить 0, то будет растягиваться на 100% контейнера),
   4. ChartLineCommaLabels - ось X через запятую для типа line, например, '1,2,3,5'
   5. ChartOptions - JSON для настроек компонента Chart. По умолчанию он имеет такой вид (детали параметров можно посмотреть в документации по chartJS): 

      {
                      responsive: true,
                      maintainAspectRatio: false,            
                      title: {
                          display: type != "bar" && type != "horizontalBar",
                          text: title
                      },
                      legend: {
                          display: true,
                          labels: {
                              fontSize: 13
                          }
                      },
                      tooltips: {
                          titleFontSize: 14,
                          bodyFontSize: 11,
                      },
                      scales: {
                          
                      }
      }

      Примечание: также в этом JSON можно добавить установку размеров контейнера (div.as-chart) через параметры contWidth, contHeight (в некоторых случаях это необходимо для того, чтобы диаграмма не налезала на нижележащие элементы). Пример: 

      select  '{"responsive": true, "contWidth": "100%", "contHeight": "1200px"}' chartOptions​

2. в SELECT 1 вывести данные карточек Title, Value, Color (цвет элемента, напр #F00).

   1. Для line Value - это строка-список значений через запятую ('23,43,12,34')

   2. Для других типов Value - число, значение соответствующего элемента в диаграмме. 

Пример работы диаграммы на стенде Watch