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

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

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

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

  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

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

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

Falcon Space

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

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

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

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

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

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

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