Сегодняшний чат: Как создавать отчеты по анализу веб-данных с 0 по 1

Фронтенд заранее заговорил о конференции и провел ее совместно с Nuggets. Добавьте codingdreamer в техническую группу конференции и побеждайте на новом стартовом рубеже.

Двадцать седьмой | Специальный интерфейс Flutter, понимание механизма веб-рендеринга | Структура пользовательского интерфейса | Оптимизация производительности, 6-5 часов вечера в прямом эфире, 6 лекторов (Jingdong / полная помощь / занятая рыба и т. д.),Нажмите на меня, чтобы сесть в машину 👉 (Адрес регистрации):

Все предыдущие серии полностью записаны и транслируются.Начните и разблокируйте все сразу

Текст выглядит следующим образом

Эта статья 15-я - ранний фронтенд чатОтчет специальной сессии, также 106-я сессия раннего чата, от обмена независимого развития - независимая книга.

1. Вступительные замечания

Уважаемые коллеги фронтенда, всем добрый день. Сегодня я поделюсь с вами "Как построить отчет по внешнему анализу данных с 0 до 1", и скажу вам, что это книга, а не облако, поэтому я хочу это исправить, и я очень благодарен нашему Мисс Хуахуа, и наш Микки очень помогает в поддержке нашей конференции. Он очень профессионален. Мы также благодарим наш интерфейс за раннее общение в чате, и мы можем предоставить такую платформу, чтобы мы могли общаться и учиться вместе. В то же время, Так же мы очень благодарны нашему Скотту, то есть Основателю нашего фронтенда раннего чата, у него много профессиональных советов и помощи по нашей теме, большое спасибо Скотт.

2. Личное знакомство

Следующее посмотрите на мое личное представление, просто небольшая сестра цветы уже упоминалась, у меня могут быть очень долгие рабочие годы в передних областях и областях данных, но я - пользователь Excel глубины, есть много использования Excel, поэтому Чтобы получить Luckysheet такую онлайн-электронную таблицу, также Babylongjs - это 3D-двигатель китайских сетевых спонсоров, вам может быть интересно узнать.

В-третьих, эволюция отчета

Ближе к делу, когда дело доходит до составления отчета по анализу данных, мы должны поговорить об истории развития отчета. Я помню, когда я работал, функций, которые нес отчет, было не так много, и объем данных был не таким уж большим, может быть, сотни или тысячи данных были почти одинаковыми, и пользователи чаще запрашивали и выполняли данные в отчет скачать. После запроса данных загрузите их локально, а затем используйте Excel для дальнейшего комплексного анализа.С популяризацией наших больших данных и развитием принятия решений на основе данных на нашем предприятии все больше и больше пользователей не хотят отчитываться. простой запрос, он может также иметь некоторые аналитические возможности, верно? Количество отображаемых данных также растет. Например, нередко требуется отображение данных 5 000, 10 000 или даже 100 000, поэтому в этом контексте мы хотим сегодня представить нашего главного героя, то естьLuckySheet.

4. Лаки Лист

LuckySheet — это онлайн-таблица, основанная на Интернете. Она может помочь вам быстро создавать отчеты по анализу данных во внешнем интерфейсе, поэтому она имеет 4 функции.

Во-первых, этоОткрытый исходный кодПротокол на основе MIT, используемый в коммерческих приложениях, не вызывает проблем.
Простой.用起来一行代码，就生成一个全功能的表格。
В-третьих, функция также оченьмощный. Все знают, что онлайн-таблицы на рынке, SpreadJS в Грейп-Сити и ONLYOFFICE очень мощные, но они платные, и если они с открытым исходным кодом, как ONLYOFFICE, будет и версия с открытым исходным кодом, а функции только ограничены. для личного использования Существует плата за открытый исходный код, такой как handsontable, x-spreadsheet и так далее. В области открытого исходного кода LuckySheet в настоящее время представляет собой новую силу. Он был открыт примерно в июне и июле, но на самом деле у него очень долгий срок службы. Он начался с 2015 по 2016 год, поэтому срок службы на самом деле очень велик, это называется? Старая новая армия, да, есть такая поговорка, ее функция очень мощная, вы можете взглянуть, когда мы продемонстрируем дальше.
И его эффективность очень высока, по сравнению сэффективный. Нет проблем отображать данные миллионов и сотен тысяч, если ваш компьютер может их нести.

5. Поделитесь наброском

Сегодня, согласно онлайн-таблице, такой как LuckySheet, существует 4 основных раздела обмена.

Первым в основном представилФункция и архитектура, вам лучше оценить, можно ли его использовать в ваших проектах отчетов по анализу данных, и с нашей второй, третьей и четвертой точки зрения, давайте представим некоторые галантереи LuckySheet, мы находимся в процессе создания LuckySheet. Что сложного с какими проблемами мы сталкивались, как мы думали и как мы их решали, а во втором, третьем и четвертом разделах я пытался использовать 3 точки, 3 шага и 3 оси, чтобы очень просто объяснить принципы. удобство похоже на создание собственных колес, верно? Если вы сами разрабатываете онлайн-таблицу, вы можете использовать ее в качестве справочного материала, поэтому я поделюсь с вами этими четырьмя аспектами.

6. Функция и архитектура

Сначала давайте взглянем на функциональную архитектуру, начнем с презентации, что может делать то, что делает Luckysheet, это небольшое десятисекундное видео, которое мы записываем. Во-первых, поддержка сложного отображения ячеек, поддержка линейного стиля, поддержка онлайн-оболочки Alt + Enter, поддержка 385 (очень полная), поддержка проверки данных, форма поддержки, поддержка нашей маленькой карты Sparkline, отображение изображения в блоке, поддержка заметок на экране. , поддерживать нашу уникальную перспективу данных, может работать в соответствии с данными, такими как Excel, и диаграмма основана на Echarts, и может вставлять изображение, и, наконец, выполнять проверку данных, поддерживать флажок, поддерживать наш раскрывающийся список Проверка списка , дата поддержки, удостоверение личности, номер мобильного телефона и т. д. могут быть установлены, что представляет собой схему всей функции LuckySheet, вы можете испытать ее.

Вот краткое описание функций системы.

Прежде всего, самая нижняя основная вещьрассчитать, неважно какое приложение, какая бы функция, какая бы операция ни была, ее нужно вычислить, да? Вычисление - это наше ядро. Вот список простых функций, включая позиционирование, формулы, вычисления переполнения, матричные вычисления и динамические массивы.
оказывать.我们的行内样式、条件格式都是通过渲染引擎，然后画在画布上面，进行这样一个展示。
ТретийдействоватьМногие пользователи сначала видят Luckysheet, я чувствовал себя очень хорошо, эта вещь очень мощная, а почему? Мы сделали это, потому что детали очень тщательно, согласно нашему уровню, это идеально, почти та же операция и Excel, пользовательский опыт является очень вниманием.
Комплексное приложение. На слоях нашего расчета, рендеринга и работы осуществляется сложная разработка приложений, точно так же, как диаграммы, сводные таблицы, импорт и экспорт, которые вы только что видели. LuckySheet поставляется с импортом и экспортом. Я познакомлю вас с ним дальше. Конечно, функция импорта завершена, а функция экспорта все еще находится в стадии разработки. Она будет предоставлена вам для проверки позже.

Это неотъемлемая функция LuckySheet.

Четыре шага расчета, рендеринг, работа и комплексное приложение, многие из наших коллег по переднему концу, и многие друзья, включая наш внутренний, будут спрашивать нас в группе, и теперь документы Yuque, Shishi и документы Tencent настолько популярны, они Как сохранить эти данные, добиться совместной работы в офисе, как это сделать? Как сохранить данные? Так что я хотел бы отметить вам, что мы сделали структуру хранения фронт-энд и бэк-энд в то время, и я продемонстрирую вам.Это такое хранимое приложение, что наш фронт-энд и бэк-энд работают вместе.

база данных
- **Реляционная база данных MySQL** для пользовательской информации, а также для сохранения некоторых исходных данных таблицы.
- Нереляционная база данных MongoDB, вы также можете использовать PostgreSql, это не ограничено, просто пример, потому что формат хранения LuckySheet основан на JSON, который очень легко сохранить в нашей нереляционной базе данных MongoDB.
- База данных в памяти Redis. Мы можем сделать кеш для наших данных, и есть три службы данных.
Фоновые службы
- **Ajax** используется для передачи общих запросов интерфейса, а также нашего пакетного сохранения. Например, если я хочу сохранить данные всей таблицы, то использую Ajax для сохранения большого количества данных.
- второйWebSocket. Вы можете посмотреть Yuque, а также наши документы Kingsoft и документы Tencent, каждый шаг операции будет иметь действие сохранения, которое выполняется с помощью WebSocket. Каждый раз, когда ячейка изменяется, соответствующая информация о ячейке будет отправлена обратно в фон, и фон будет сохранен в базе данных, что является таким процессом. Поэтому в LuckySheet тоже есть такая встроенная функция.Каждая операция будет отправлять WebSocket запрос в фон.Пока вы настраиваете адрес для получения запроса,а потом передаете его в БД такая функция совместного сохранения есть созданный.
- ТретийСовместная служба. То есть, когда мы все вместе редактируем таблицу, каждый может видеть свою область выделения, какой столбец редактируется, какую ячейку редактирует, и LuckySheet также сделал соответствующее приложение. При редактировании будет предоставлен интерфейс, выделение означает, что будет такая подсказка, когда несколько человек редактируют одновременно на вашем интерфейсе.
- Четвертый сервис, который мы считаем более инновационнымАнализ работы. GoogleSheet 当然也有这个服务，一个 Excel 的函数，各位可以想象一下，它可以调用后台服务，返回结果在表格里面进行展示，包括我们复杂的一些聚类算法、分类算法、文本分析算法，都可以进行后台服务返回到前台这样的应用。还有一个比较好用的，比如我在电子表格里面输入了日期和股票代码，我用公式引用一下，在后台拿到当日的价格，就可以返回到我们的前台，进行股票价格的这样一个展示，包括在界面可以进行各种拖拽，展示股票的收盘价和开盘价都 ok。
Интерфейсное приложение.这是我们的一个重头，就像刚才讲到的，LuckySheet 没有基于我们现在流行的三套框架，因为它是 2015 年开始的，当时还是 jQuery 非常流行，所以当时基于的架构技术栈就是 HTML、CSS 和 jQuery，几乎是用原生应用写出来的，没有基于三大框架，在三大框架里应用现在也是没有问题的。右边就是我们 LuckySheet 的架构，渲染、计算、综合应用和数据保存，这样就形成了 LuckySheet 一个前后端服务的架构。

Затем посмотрите, какие функции Luckysheet. Вот формула для расчета и раскраски, вы можете видеть, что мы поддерживаем формулу очень сложны, вложенные слои, если ваша машина позволяет вам гнездить слой 100if, или внедрить любую формулу не проблема, любая формула, которую Excel может анализировать, LuckySheet может анализировать ее полностью, а ячейки и текст в ней могут быть окрашены, красный текст отображается зеленым, и Excel также непротиворечив. выделение будет выделено в ячейке, на которую указывает ссылка, и выделение можно будет продолжать оперировать, например перетаскивать выделение, и параметры в компании будут меняться, что почти так же, как операция Excel.

Импорт рендеринга и импорта формул

Справа Excel, очень красивая таблица. Импортируйте в LuckySheet с помощью функции импорта LuckySheet, и он сгенерирует формат слева. Почти две стороны выглядят совершенно одинаково, поэтому LuckySheet сделал очень подробное сопоставление с Excel.Основные стили визуализации точно такие же, и формулы также могут быть полностью визуализированы. Вы можете видеть красную колонку слева, является ли Sum F7:F41 таким отображением формулы.

Позвольте мне дать вам демонстрацию, это Excel, вы можете посмотреть, как мы упоминали на картинке, войти в нашу демонстрацию, импортировать Excel прямо сейчас и посмотреть, точно ли это то же самое, и поддерживает ли формулы, это функция импорта LuckySheet. Функция экспорта находится в стадии разработки, и если ее импортировать, она уже поддерживает очень сложные форматы, включая вращение, перенос строк и встроенные стили, которые могут полностью поддерживаться и могут использоваться с уверенностью.

сводная таблица

Это сводная таблица, мы не нашли эту функцию в грейп Сити, в том числе и в ONLYOFFICE, возможно мы первый плагин встраивающий эту функцию в электронную таблицу, он может выполнять анализ данных, то есть пользователю это не нужно поставить данные Downloaded. После того, как вы запросите десятки тысяч фрагментов данных и выполните агрегирование на веб-странице, я могу примерно узнать такую статистическую информацию о ней, и мне не нужно загружать ее снова.Эта функция аналогична функции анализа данных, которую использует OLAP. был больше обеспокоен в то время.Замечательно, я дам вам дальнейшее введение позже, это отображение наших функций и архитектуры.

7. Основной алгоритм

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

Основная идея анализа формулы

Что такое разбор формулы? Выше мы простая формулаSUM(A1:B3, E5)+1. Это очень простой расчет формулы в LuckySheet в Excel. Синий цвет указывает на название формулыSUM, зеленый — это параметр, за которым следует+1Это арифметика, это на самом деле псевдокод, как псевдокод, преобразованный в такую формулу, которую мы можем идентифицировать, JavaScript, заслуживает обсуждения, на самом деле, и наш язык Java, язык Python, в том числе, как разрешить наш JavaScript стать языком Си? Как иметь такую подобную базовую логическую операцию.

Вот идея: во-первых, нам нужно сгенерировать наше абстрактное синтаксическое дерево из псевдокода. Абстрактное синтаксическое дерево — это такая древовидная структура, которая представляет полное состояние синтаксического анализа формулы:+1 и СУММ.SUMНиже приведены два параметра ячейки, если создается такое абстрактное синтаксическое дерево, вы можете видеть, что последняя строка генерирует наш исполняемый код JavaScript. почему я_.SUMЭта формула отображается в таком виде, потому что lodash (библиотека интерфейсных инструментов), возможно, использовалась вами, в ней есть функция SUM, а это значит, что мы должны определить эту функцию SUM в фоновом режиме.LuckySheet поддерживает 385 функций. , Это было реализовано в фоновом режиме один за другим, пока мы ссылаемся на функцию в соответствии с соответствующей строкой, все в порядке.

В SUM мы преобразовали информацию о ячейке в двумерный массив, потому что от A1 до B3 — это двумерные массивы, а вторая E5 — это ячейка, которая ссылается на число, поэтому задача, которую нужно решить с помощью функции SUM заключается в том, чтобы передать, сколько параметров (будь то двумерный массив, одномерный массив или число), добавить в него числа целиком, получить число и, наконец, +1, а затем использовать наш Eval функция (в нашем JavaScript есть обе функции) для выполнения, независимо от того, был ли уже сгенерирован результат.

думать

Это основная идея разбора нашей формулы. Сейчас это относительно простая формула. Эта сложная формула генерирует наше абстрактное синтаксическое дерево, которое очень сложно. Вы можете подумать, вы можете посмотреть, как это сделать, вот вам уточнение, то есть, как сгенерировать абстрактное синтаксическое дерево, мы будем планировать задачу, как сгенерировать абстрактное синтаксическое дерево.

Ключевые моменты анализа формулы

Два ключевых момента: первыйлексический анализ,второйРазбор. Обе общая процедура на самом деле представляет собой два глубокого абстрактного синтаксического дерева, два трюка.

首先怎么解析？ Нам нужноsplitЧтобы разобрать нашу строку, письмо разборки по одному читать дословно, по ключевому слову, что ключевое слово, что делает? Можете проанализировать ранее эту формулу, ключевые слова: левые и правые круглые скобки, запятые, двойные кавычки, одинарные кавычки и фигурные скобки. По этим ключевым словам идентифицируем наш Токен. Токен это название формулы, то есть имя функции, а так же внутри функций имена параметров, константы и операторы а так же сложение, вычитание, умножение, деление и по модулю, есть такие Токен генерация, лексический анализ этап — это генерация такого Some Token.

Второй шаг, синтаксический анализ, заключается в сборке синтаксического дерева, поскольку лексический анализ только распознает токен, но не собирает его в синтаксическое дерево, поэтому второй шаг заключается в создании абстрактного синтаксического дерева посредством синтаксического анализа. Первое, что нужно передать, это наш Токен, здесьУведомлениеСуть в том, чтобы избежать влияния круглых скобок, так как в повседневных расчетах круглые скобки имеют большое влияние на порядок вычислений, поэтому необходимо поставитьинфиксные выраженияПеревести вPostfix выражение.

чтоинфиксные выраженияШерстяная ткань? Например1+(2+3)×4-5Это инфиксное выражение. Инфиксное выражение — это состояние такого выражения, которое мы видим в математике каждый день. Ему нужны круглые скобки. По сути, машине трудно вычислить по этому выражению, поэтому для облегчения вычисления выражения машиной, нам нужно преобразовать инфиксное выражение в наше постфиксное выражение, которое называется термОбратный польский. можно увидеть в таком виде1 2 3 + 4 x + 5 -, эта форма может быть странной, но она очень удобна для чтения машиной Думайте об этом как о стеке: очень удобно толкать стек и выталкивать стек для вычислений, поэтому эти два шага составляют ключевые моменты нашего анализ формулы Вы можете копнуть глубже. Я, возможно, не буду говорить слишком глубоко здесь, потому что это слишком глубоко, чтобы говорить об этом, и не так много времени.Вы также можете пообщаться со мной наедине, и эта часть анализа формулы закончена.

обновление цепочки формул

Представьте, что данные ячейки в Excel обновляются, если в ячейке есть формула, связанная с ней, будет ли она обновляться? потому что это относится к моей камере. На рисунке вы видите ячейку B1.Если ячейка B1 будет обновлена, это повлияет на нашу формулу 2, формулу 3, формулу 4 и формулу 5. Почему? Поскольку формула 2 и формула 3 напрямую относятся к B1, но формула 4 относится к формуле 2, а формула 5 относится к формуле 3, существует такое отношение обновления цепочки компаний.

Нам нужно найти формулу 2, формулу 3, формулу 4 и формулы 5 через B1, и мы должны указать их порядок.Формула 3 должна быть рассчитана заранее, и предоставлена формуле 2. После того, как формула 2 вычислена, формула 4, а затем к уравнению 5, есть такой рассчитанный порядок. Если я не буду следовать этому порядку, например, я сначала обновлю Формулу 4, но если я обновлю Формулу 2, вычисленное значение Формулы 4 будет неправильным, поэтому должен быть такой алгоритм для определения такого обновленного отношения. это трехсторонний топор для обновления сети нашей компании.

Расчетные точки цепочки

Формат хранения формул

Второй шагПостроить дерево формул. Здесь используется для вставки стека в стекпоследний пришел первый вышел, вы должны быть хорошо знакомы с этим, какова его функция? Создайте отношения родитель-потомок между функциями, вы также использовали меня, вы ссылались на меня, вы мой ребенок. Если у моего потомка есть еще одна подчиненная ссылка, это отношение внука, поэтому необходимо сформировать такое дерево, анализируемое дерево, чтобы продолжить наши вычисления.

Третий шаг заключается в использованииОбход дерева в глубину,Обработка многоуровневых вызовов. Представьте, что в корне нашего дерева нет узла, ссылающегося на него? После того, как он рассчитан первым, он предоставляется данным верхнего уровня, так что данные верхнего уровня будут гарантированно точными, поэтому необходимосначала используйте глубинуТакой алгоритм обхода дерева, а затем продолжения расчета, то есть вычисление цепочки точек, алгоритм представлен здесь до конца.

Мы два очень важного момента:Анализ формулыа такжеЦепной расчет формул.

8. Рендеринг

Рендеринг тоже очень важен.После того, как расчеты будут закончены, поговорим о рендеринге. Рендеринг также очень своеобразен в LuckySheet.Чтобы отобразить большой объем данных, он использует функцию ленивой загрузки.Где я вижу, где отображать, вместо того, чтобы загружать весь объем за один раз, отображать полный объем данных, может быть 1000 тысяч строк данных, но я могу видеть только 100 строк, поэтому я показываю только эти 100 строк, посмотрите, сколько отображается.

Рендеринг

мы выбралиХолст визуализируется как холст, почему стоит выбрать Canvas. Поскольку он очень эффективен, он может поддерживать синхронизацию со стилем, таким как Excel.В отличие от DOM, им сложнее управлять, и проще использовать Canvas.Вот причина его выбора. Представляете, наш выбор Canvas означает, что нам не хватает взаимодействия с пользователями? Пользователь выбрал определенную ячейку, как я узнаю, что он выбрал определенную ячейку? Поскольку это не DOM, он выбирает Canvas, я не знаю, где конкретный выбор, поэтому наш рендеринг также основан на вычислениях, то есть пользователь щелкает позицию на экране, мы прокручиваем в соответствии с положение вашей полосы прокрутки, прокрутите Смещение полосы, плюс смещение положения вашей точки на экране, в то же время учитывайте, чтобы определить, на какую ячейку вы указываете, и положение ячейки в этой точке точно так же и вам.. основываться на расчетах.

мы использовали здесьбинарный поиск. Поиск по двум точкам также является относительно простым алгоритмом, который уже очень распространен в Интернете, но он действительно очень эффективен. 1 миллион строк данных находится в определенной ячейке, расположенной в ячейке, по которой вы щелкнули, и может заканчиваться десятком или около того бюджетов, что очень эффективно, поэтому наш рендеринг основан на ленивой загрузке Canvas, а также на вычислениях. .

перенос слова

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

Рендеринг клетки должен указать его ширину и высоту, здесь сперенос словаНапример, чтобы представить, как мы оцениваем высоту и ширину, мы сначала используем метод MeasureText для измерения ширины и высоты. Если использовать аналогию, чтобы процитировать отрывок: я подобрал пенни на обочине дороги и отдал дяде-полицейскому. В этом предложении мы обнаруживаем, что первое слово не превышено, второе слово не превышено, пока не будет превышено «дай», мы возвращаемся к ширине «креста», которая находится в этой ячейке, поэтому ставим «дай» Символ «Дядя Полиция» отображается в новой строке, и получается рассчитанный результат.Это наш простой дизайн автоматического переноса строк, который может автоматически переносить строки в соответствии с содержимым, введенным пользователем.

Вращение текста

Мы видим, что есть высота и ширина текста, поэтому следующая проверка знаний, это наше текстовое вращение. Вращение текста Это: например, я подобрал пенни на улице, она не была изначально выбрана задача, это горизонтальный уровень действий, но вращение альфа-угла вверх, получила наклонный текстовый стиль, получить это Стиль в будущем, вы можете увидеть, рендеринг его ключевые моменты, где? Мы хотим точно рассчитать его высоту на ширину, ширину и высоту поворота, здесь мы столкнулись с ямой, когда мы рассчитали ширину и высоту синего региона, вероятно, потому что мы не считались так много, не точно рассчитали Ширина и высота текста, что приводит к смещению его положения, это не так точно, чтобы рассказать его высоту, определяет, является ли дисплей также задачей.

Позже мы обнаружили, что высота текста очень ограничена по сравнению с его шириной, а его высота является важным фактором, влияющим на нашу ширину и высоту. Правильная ширина и высота после поворота должны определяться по нашей бета-области, поэтому прямо приводим формулу: ширина после поворота равна ширине до поворота разcos(a)Добавьте высоту до поворота, умноженную наsin(a), высота после поворота равна ширине до поворотаsin(a)Добавьте высоту до поворота, умноженную наcos(a), что дает точный расчет ширины и высоты.

Вращение текста + обернуть

Далее начинается введение такого сложного рендеринга. Представьте, все, что произойдет, если текст будет повернут и завернут? Поначалу Excel был очень распространенным действием, поворот и перенос строки генерировали стиль, но я не знаю, думал ли кто-нибудь, как это сделать, как добиться такого формата, и мы потратили на это кучу денег. Стоимость выполнения этой штуки,потому что ям очень много,в шагах нужно рассмотреть около 18 результатов.Мы писали их один за другим в то время,что было очень хлопотно.Здесь я объясню только относительно простую ситуацию .

Сначала посмотрите на высоту после поворота слева.После поворота она превышает высоту нашего юнита, и она превышена со времен «дороги», поэтому мы должны выполнить вычисление переноса строки, чтобы получить результат справа . Строка "Я в дороге", строка "Нашел на границе" и строка "Пенфэн" генерируется заново, чтобы получить такой результат, как получить такой результат? Все, представьте, что он повернут, а это что он повернут на угол, давайте восстановим его, не поворачивайте, как он выглядит, так что просто посмотрите на середину. road», это обычный процесс рендеринга сверху вниз.

Мы обнаружили, что этот процесс похож на вращение для получения результата справа, что здесь ключевого момента? Как получить наше смещение, от «ребра» до «точки», какая между ними связь и как вычислить такой формат? Итак, мы приводим формулу прямо здесь, мы устанавливаем высоту «Я в дороге» равнойH1, "Граница проверена" естьH2, "центы" этоH3. Сколько составляет смещение "края"? это высота текстаH1разделить на нашиtan(a)Было компенсировано, «пенни», как это компенсировать? это нужноH1 + H2Разделенныйtan(a)

думать

Метод мератекста

Давайте поговорим о некоторых наиболее интересных методах рендеринга, с которыми мы столкнулись, и уточним их. Взгляните на метод MeasureText, который представляет собой метод измерения высоты и ширины текста, у него есть еще два важных свойства, одно из них — factBoundingBoxAscent и factBoundingBoxDescent, затем эти два свойства определяют высоту текста, это свойство есть в Chrome. 51 версии Раньше не было, когда вычислять высоту было очень больно, добавили после Chrome 51, а как быть с Chrome 51? В то время мы использовали метод DOM для измерения высоты текста перед рендерингом.Эффективность не такая высокая,и есть проблемы.Это считается лечением совместимости.

Мы возвращаемся к этим двум свойствам, эти два атрибута очень интересны, последовательно следуют свойства TextBaseline для рендеринга, вы можете увидеть базовый уровень этой линии эквивалентной красной этой линии.

По умолчанию эта линия отрисовывается по нижнему краю буквы Abcdef, но вы обнаружили, что у gjp есть хвост, который выходит за пределы baseLine, очевидно Ascent равен высоте верхней части baseLine, а нижней часть baseLine - это Descent, который в сумме составляет высоту текста.
Если это Top, поскольку baseLine визуализируется вдоль вершины, Ascent равен 0, а Descent — это общая высота.
Если это Bottom, нижний край выравнивается. Спуск становится равным 0, а Asent — всей высотой.

Этот метод очень интересен, но очень эффективен для вычисления высоты.

клип метод

Второй — это наш метод clip.Метод Canvas очень эффективен, он может ограничить содержимое определенной частью для рендеринга. Представьте, если ячейки будут влиять друг на друга при отрисовке, но пока используется метод клипа, ячейка точно ограничена диапазоном, который она хочет отобразить, даже если он превышает, это не повлияет на следующую ячейку. при клипсовом методе эффективность неплохая, можно попробовать.

Оптимизация производительности рендеринга

Хотя мы представили метод MeasureText, этот метод на самом деле влияет на производительность. Все, представьте себе, что когда LuckySheet's Canvas обновляется, он будет рендерить такой интерфейс десятки раз при каждой прокрутке, в результате получается такой эффект прокрутки данных, поэтому требования к производительности очень высоки.После тестирования было обнаружено, что MeasureText может не использовать. Их слишком много, и они не могут быть использованы повторно. После многократного использования это приведет к большим потерям производительности и вызовет отставание.

Второе предложение — задержать выпуск информации о ячейке, то есть при прокрутке в первый раз кэшировать ячейку и текст, то есть кэшировать размер, ширину, высоту и положение. отпускаем его первым, и когда пользователь может прекратить прокрутку, мы отпускаем его, что также обеспечивает повышение эффективности.

Третий — использовать Web Worker для глубокого копирования. Представьте себе всех, если есть 1 миллион ячеек, при отмене и повторе иногда будет использоваться функция глубокого копирования.При глубоком копировании мы сравнили множество методов глубокого копирования безрезультатно., медленные. Даже самый высокий из них работает медленно, потому что 1 миллион ячеек — это слишком много, поэтому мы используем Web Worker для глубокого копирования и позволяем ему работать в фоновом режиме, а пользователи в основном могут плавно работать на переднем плане, что позволяет избежать такого восприятия.

В-четвертых, избегать использования такого метода, как putImagingData, DrawImage имеет гораздо более высокую производительность, чем он, поэтому всем следует обратить внимание на то, чтобы избегать использования этого метода, я думаю, что есть подводные камни. Вот некоторые предложения для вас со стороны рендеринга, а затем также представлена сторона рендеринга.

9. Пивотный стол

Если мы хотим выполнить анализ данных, мы не можем избежать введения нашей сводной таблицы.В настоящее время мы, кажется, первые, кто имеет такую функцию в электронной таблице.В Google Sheet она есть, но я, кажется, не видел любые другие документы.Так что этот кусок мы уже сделали, и у нас еще есть небольшой опыт.

Что такое сводная таблица

Для начала нам нужно узнать, что такое сводная таблица. Позвольте мне представить это сначала, потому что многие из нас, кто занимается интерфейсом, занимаются IT. Могут быть некоторые недопонимания о продукте, и некоторые могут не понять. Это как черный ящик. Я открою этот черный ящик. чтобы вы знали, что такое сводная таблица. Это такая функция, с помощью которой пользователь работает с интерфейсом и выполняет статистический анализ данных. Вы можете видеть, что тот, что слева, - это исходные данные, которые содержат столбцы 4, которые на самом деле являются полями 4: студент, предмет, пол и балл, Если мы работаем в сводной таблице, после выбора студентов и баллов сумма из баллов будет Получить общий балл Алекса ученика, общий балл Джой и общий балл Тима, чтобы получить такой результат, хороший анализ данных, как это сделать?

Технологическая операция

Столбцы и строки представляют широты, а значения представляют метрики.

Что произойдет, если мы пойдем еще дальше и поместим предметы на столбцы? Все видят, что наша строка еще студенческая (третья), но мы добавили столбец в эту таблицу, и таблица открылась, в заголовках столбцов было много тем, и этот формат был сгенерирован, поэтому это отбор предметов, студентов , После подсчета такого результата можно подумать как сгенерировать такой формат, и как сгенерировать такой формат?

идеи

Здесь уточняйте его, помните, что мы выбрали три поля, на самом деле, повлиять на баллы на общую сумму никакого эффекта. Мы только студенты и предметы этих двух полей оказали влияние на агрегированное портфолио. Существует несколько комбинаций вида: зеленые, синие, оранжевые и желтые четыре комбинации, добавьте предмет студента - это композиция, Alex English 108 баллов, радость английского языка 96 минут, чтобы сформировать такую комбинацию.

Синий студент представляет статистику студента, которая является общим баллом Алекса, оранжевый представляет общий балл наших предметов английский язык, а общий балл составляет 296. Мы получили такую сводную информацию Наконец, желтый цвет представляет собой сумму данных всей таблицы, и все строки и столбцы складываются вместе.Он равен таким данным, как 1687, поэтому вы обнаружили, что он генерирует комбинацию 4 видов статистики данных, мы можем понять это какизмерение, измерение является более распространенным термином в области анализа данных.

многомерный куб данных

Что касается измерения, важной концепцией является то, как узнать, как генерировать несколько видов статистики для этой таблицы.Теперь мы выбрали два измерения и сгенерировали 4 вида статистики. Если есть 3 измерения, сколько должно быть произведено, если есть 4 измерения, сколько должно быть произведено? Поэтому мы даем ответ прямо здесь.Например, если мы выберем 4 измерения ученика, класса, пола и предмета, мы будем 2 в n-й степени, чтобы создать 16 комбинаций. Пока данные в этих 16 комбинациях агрегированы и объединены, генерируется такой метод представления данных нашей сводной таблицы.Что касается того, как это отображать, наш фронтенд-персонал очень хорош в этом.Подробнее. Содержание этой части относится к такой точке знаний нашего многомерного куба данных, Многие из них будут использовать такую концепцию в анализе данных, в том числе популярный на нашем рынке Kylin, который использует такой алгоритм объединения данных и объединения измерений. .

Десять, поделись резюме

Выше приведены основные части контента, которым мы поделились.Чтобы сделать здесь сводку по обмену, если вы хотите сделать отчет об анализе данных, вы должны сначала решить четыре уровня расчета, рендеринга, операции и сложного приложения. После решения вы можете сделать хороший отчет об анализе данных. Конечно, вы также можете использовать LuckySheet, чтобы сделать это. Теперь у нас 2 тысячи лайков на Github. Дайте нам лайк.

общаться с

Вы также можете войти в нашу официальную группу для общения, добавить WeChat нашего редактора, чтобы продолжить обсуждение, вы можете отсканировать код.

QA

Каковы ключевые моменты парсинга и лексического анализа?

Я только что упомянул ключевые моменты грамматического анализа и лексического анализа.Ключевые слова.我们伪代码，它的关键的一个字符是什么？就像我们现在在 Excel 里面的这样一个公式，它的关键的字就是括号、逗号、单引号和双引号，只要把我们的关键词给识别好，就可以通过这关键词进行分割，把我们的 Token（标识），包括我们公式的名字、参数、一些运算符给识别出来，这样的话就是词法分析的一个关键点。

然后说到语法分析的话，其实词法分析这边已经把 Token 准备好了。你厨师下菜，这个料给你准备好了，语法分析就是炒菜，把 Token 进行组合，生成一棵树。就是我刚才讲到的生成一个后缀表达式的这样一个方式，来进行再次的组装，然后生成一棵树，就组合成了我们这样一个抽象语法树的结构，生成了这样一个抽象语法树，很好的去解析我们这样的公式，当然各位也可以直接读我们的源码，然后看一看。 Хорошо, спасибо.

Не забудьте до 6-5 вечера вживую О,Нажмите на меня, чтобы сесть в машину 👉 (Адрес регистрации):

Все предыдущие серии полностью записаны и транслируются.Начните и разблокируйте все сразу

Текст выглядит следующим образом

1. Вступительные замечания

2. Личное знакомство

В-третьих, эволюция отчета

4. Лаки Лист

5. Поделитесь наброском

6. Функция и архитектура

Импорт рендеринга и импорта формул

сводная таблица

7. Основной алгоритм

Основная идея анализа формулы

думать

Ключевые моменты анализа формулы

обновление цепочки формул

Расчетные точки цепочки

8. Рендеринг

Рендеринг

перенос слова

Вращение текста

Вращение текста + обернуть

думать

Метод мератекста

клип метод

Оптимизация производительности рендеринга

9. Пивотный стол

Что такое сводная таблица

Технологическая операция

Столбцы и строки представляют широты, а значения представляют метрики.

идеи

многомерный куб данных

Десять, поделись резюме

общаться с

Рекомендуемые книги

QA