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

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

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

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

  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. Интерактивные диаграммы, графики
Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK