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

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

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

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

1. в 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 - число, значение соответствующего элемента в диаграмме. 

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

1. Пример работы диаграммы на стенде Watch
2. Диаграмма Ганта на сайте
3. Диаграмма Chartbar
4. Интерактивные диаграммы, графики