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

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

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

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

  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

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