Диаграммы и графики, визуализация

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

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

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

ChartLineCommaLabels - ось X через запятую для типа line, например, '1,2,3,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: {
                    
                }
}

ChartTitle - заголовок диаграммы,
ChartType - тип диаграммы line, bar, pie, radar (и некоторые другие типы из https://www.chartjs.org/docs/latest/),
ChartWidth, ChartHeight - ширина и высота (если поставить 0, то будет растягиваться на 100% контейнера),

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

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

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

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

Дополнительные материалы

Страница-источник на сайте falconspace.ru