Вывод таблицы и графика в одном компоненте
В данном примере мы выводим график и таблицу одновременно. Причем данные таблицы и графика могут не пересекаться.
Как это сделать:
Выводим таблицу как обычно и в SELECT 3 ставим JSON настройку для графика apexChartOptions (при этом viewType мы не заполняем).
Также мы можем добавить куда-то разметку с классом as-apexChart (но если ее не будет в таблице, то она просто ее добавит перед выводом таблицы, но в общем случае ее лучше явно указать).
Пример процедуры:
CREATE PROCEDURE [dbo].[crud_tableAndChart_getItems]
@filters CRUDFilterParameter READONLY,
@sort sql_variant,
@direction nvarchar(8),
@page int,
@pageSize int,
@username nvarchar(32)
AS
BEGIN
declare @ids TABLE (id int)
-- filters...
declare @filterName nvarchar(128)
select @filterName = Value from @filters where [Key] = 'name'
insert into @ids
select id
from tst_customers
where (isnull(@filterName, '')='' or name like '%'+@filterName+'%')
-- SELECT 1
select id, name, fio
from tst_customers
where id in (select id from @ids)
order by name
OFFSET @PageSize * (@Page - 1) ROWS
FETCH NEXT @PageSize ROWS ONLY;
-- SELECT 2
select count(*) from @ids
-- SELECT 3
select 'h3' headerTag, '' Subtitle, 1 HideTitleCount, '{
"chart": {
"type": "line"
},
"series": [{
"name": "Выручка",
"data": [30,40,35,50,49,60,70,91,125],
"color": "#afa"
},
{
"name": "Затраты",
"data": [20,10,15,40,29,50,20,15,45],
"color": "#faa"
}],
"xaxis": {
"categories": [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
' apexChartOptions
ENDВ чем выгода для бизнеса?
Совместный вывод таблицы и графика в одном компоненте. Дает возможность одновременно видеть детальные данные и их визуализацию.Последние обновления
Форма 24.02.2026
05.02.2026
Форма 25.01.2026
Форма 12.12.2025
Интеграции 24.11.2025
Разное 24.11.2025
Форма 15.11.2025
Визуализация 02.11.2025
Таблица 08.10.2025
Форма 26.09.2025
Таблица 23.09.2025
Разное 23.08.2025
Таблица 21.08.2025
Форма 20.08.2025
Таблица 18.08.2025
Таблица 21.06.2025
Форма 07.06.2025
Форма 29.03.2025
SQL-инструмент для создания личных кабинетов на сайте
Платформа Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки
Это быстрое внесение изменений
по ходу эксплуатации программы
Это современный интерфейс
полная адаптация под мобильные устройства