SpreadJS: JavaScript Spreadsheet Components & Tools

Spread JS - это JavaScript библиотека, предназначенная для создания интерактивных и мощных приложений для анализа данных. Она предлагает мощные возможности для работы с табличными данными, включая многочисленные функции анализа и визуализации данных.

Одной из основных возможностей Spread JS является работа с сеткой данных. Это означает, что пользователь может вводить данные, редактировать их, перемещать строки и столбцы, сортировать таблицы и выполнять другие действия с данными. В Spread JS используются различные ячейки, которые могут иметь разный тип данных, например, число, текст, дата и другие.

Пример кода для создания таблицы с использованием Spread JS:

javascript
// Создание контейнера для таблицы
var container = document.getElementById('spreadjs-container');
// Создание нового объекта таблицы
var spread = new GC.Spread.Sheets.Workbook(container, { sheetCount: 1 });
// Получение ссылки на активный лист
var activeSheet = spread.getActiveSheet();
// Заполнение ячеек таблицы данными
activeSheet.setValue(0, 0, 'Фамилия');
activeSheet.setValue(0, 1, 'Имя');
activeSheet.setValue(0, 2, 'Отчество');
activeSheet.setValue(0, 3, 'Возраст');
activeSheet.setValue(1, 0, 'Петров');
activeSheet.setValue(1, 1, 'Иван');
activeSheet.setValue(1, 2, 'Сергеевич');
activeSheet.setValue(1, 3, 35);
activeSheet.setValue(2, 0, 'Иванов');
activeSheet.setValue(2, 1, 'Петр');
activeSheet.setValue(2, 2, 'Дмитриевич');
activeSheet.setValue(2, 3, 27);
// Выбор стиль ячейки и применение к ней
var style = new GC.Spread.Sheets.Style();
style.backColor = '#FFDAB9';
activeSheet.setStyle(1, 0, style);
// Добавление формулы в ячейку
activeSheet.setFormula(3, 3, '=AVERAGE(D2:D3)');

Пример кода для создания графика с использованием Spread JS:

javascript
// Создание контейнера для графика
var chartContainer = document.getElementById('spreadjs-chart');
// Создание нового объекта графика
var chart = new GC.Spread.Sheets.Charts.Chart('chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, chartContainer);
// Получение ссылки на активный лист
var activeSheet = chart.dataRange.sheet;
// Заполнение ячеек данными
activeSheet.setValue(0, 0, 'A');
activeSheet.setValue(0, 1, 'B');
activeSheet.setValue(1, 0, 'Январь');
activeSheet.setValue(1, 1, 100);
activeSheet.setValue(2, 0, 'Февраль');
activeSheet.setValue(2, 1, 200);
activeSheet.setValue(3, 0, 'Март');
activeSheet.setValue(3, 1, 300);
// Установка данных для графика
chart.dataRange = new GC.Spread.Sheets.Range(0, 0, 3, 1);
// Установка основных и вспомогательных меток на графике
chart.xaxis().title('Месяцы');
chart.yaxis().title('Уровень продаж');
// Установка стилей для данных на графике
var series = chart.series().get(0);
var style = new GC.Spread.Sheets.Charts.Style();
style.fill = '#4682b4';
style.border = new GC.Spread.Sheets.Charts.LineBorder('#4682b4');
series.style(style);
// Отображение графика
chart.refresh();

Таким образом, Spread JS предоставляет разработчикам удобный инструментарий для создания интерактивных таблиц и графиков, которые могут быть использованы в веб-приложениях для анализа данных.