предисловие
Автор потратил много времени на размышления о том, как спроектировать и реализовать визуальный редактор для страниц H5.H5-Dooring, от первой версии до настоящего времени, он претерпел множество итераций и оптимизаций версий и получил много ценных предложений.В настоящее время только что завершен базовый план проектирования и реализации мобильной визуализации данных, и я подведу итоги и рассмотрю это здесь.
Давайте сначала взглянем на базовый предварительный просмотр реализации:
ты получишь
- на основеantv/f2Реализовать инкапсуляцию визуальных графических компонентов
- Как разработать табличный редактор и интегрировать его вantdв виде
- компоненты визуализации данныхschemaсоглашение
- использоватьjs-xlsxРазобратьExcelфайл и импортировать вTableкак визуальный компонент висточник данных
текст
Прежде чем приступить к формальной реализации, автор сначалаВизуализация данных H5Сделайте базовое введение, чтобы каждый мог понять его ценность.
1. Сценарии применения решения для визуализации данных H5
С быстрым развитием искусственного интеллекта и больших данных появляется все больше и больше приложений для проектирования визуализации данных на мобильных терминалах, в основном отраженных вдиаграмма данных, что является нашим общимГистограмма,линейный график,гистограмма,Радарная диаграммаЖдать. Они могут ярко отображать изменяющуюся тенденцию различных продуктов или определенных характеристик, чтобы обеспечить основу для принятия нами решений. Например, наша общаяРадарная диаграмма личностного теста, всевозможные финансовые приложения любят разыгрывать такие-то голосаГрафик прогноза тренда, оператор предпочитает использоватьмодель воронкии т.д. Практически для любого поля есть свое приложение для визуализации. Ниже приведены некоторые примеры:
Таким образом, чтобы удовлетворить потребности предприятий в визуализации в сценарии мобильного терминала, очень практично разработать платформу для создания дурацкой визуализации для мобильного терминала, В настоящее время это делают многие компании.Бизнес-аналитикаЕсть и хорошие приложения в этой области. Далее автор сведет вас вместе для достижения такогоВизуализация данных H5установить растительную форму.
2. Внедрение платформы проектирования визуализации данных H5
В настоящее время на рынке наиболее популярны следующие библиотеки визуализации:echart,antv,D3.jsПодождите, для мобильного терминала автор еще думаетantv/f2Более подходящий, его официальный сайт описан следующим образом:
F2 — это готовое решение для визуализации, ориентированное на мобильные устройства, которое идеально поддерживает среду H5 и совместимо с несколькими средами (Node, апплет, Weex). Рекомендации по дизайну, чтобы предоставить вам лучший опыт построения мобильных графиков.
Пока будем верить описанию его официального сайта, а следующая техническая реализация будет основываться на авторскомf2Выполните вторичную инкапсуляцию визуальных компонентов.
2.1 Дизайн требований
Последовательный стиль автора перед разработкой продуктов заключается в том, чтобы сначала уточнить требования.Только после того, как требования определены, мы можем сделать более подходящие технические решения и решения, поэтому автор возьмет вас для анализа здесь.Мобильный визуальный редактордизайн требований.На приведенном выше рисунке показана базовая модель редактора визуальных компонентов, структура композиции примерно следующая:
- Компонент диаграммы
- источник данных
- Редактор свойств (название компонента, цвет, выравнивание и т. д. свойства)
Таким образом, мы можем грубо абстрагировать его в следующий прототип:
Список компонентов дает нам возможность выбирать различные компоненты. Область холста в основном используется для перетаскивания графики и настройки положения и размера графики. Редактор используется для настройки «формы» графики и импорта данных. источники. После понимания основных требований мы приступим к следующей разработке.
2.2 На основанииantv/f2Реализовать инкапсуляцию визуальных графических компонентов
Потому что на рынке нет более зрелыхf2изreactКомпоненты и другие пакеты, поэтому здесь я создаю простой вторичный пакет для выполнения наших требований к настройке компонентов. Для списка компонентов, чтобы улучшить производительность загрузки, автор используетзаполнитель изображениязаменять. Режим передачи данных иH5-DooringПеретаскивание существующих компонентов является согласованным, поэтому я не буду представлять их здесь по одному.
Давайте установим его перед разработкой компонентаf2:
yarn add antv/f2
Чтобы еще больше уменьшить размер кода мобильного терминала и повысить производительность загрузки, мы можем вводить компоненты по мере необходимости при введении компонентов:
// 引入核心包
const Core = require('@antv/f2/lib/core');
require('@antv/f2/lib/geom/line'); // 只加载折线图
require('@antv/f2/lib/geom/area'); // 只加载面积图
На официальном сайте метода введения по запросу есть подробная инструкция, если вам интересно, вы можете узнать об этом.
В приведенном выше анализе требований у нас есть общее представление о свойствах, которые необходимо установить для компонентов визуализации.Здесь мы разберем их для следующей инкапсуляции компонентов визуализации:Давайте посмотримChartРеализация компонентов:
// components/Chart
import { Chart } from '@antv/f2';
import React, { memo, PropsWithChildren, useEffect, useRef } from 'react';
import ChartImg from '@/assets/chart.png';
import styles from './index.less';
type DataItem = {
name: string;
value: number;
};
interface XChartProps {
isTpl: boolean;
title: string;
color: string;
size: number;
paddingTop: number;
data: Array<DataItem>;
}
const XChart = (props: PropsWithChildren<XChartProps>) => {
const { isTpl, data, color, size, paddingTop, title } = props;
const chartRef = useRef(null);
useEffect(() => {
if (!isTpl) {
const chart = new Chart({
el: chartRef.current || undefined,
pixelRatio: window.devicePixelRatio, // 指定分辨率
});
// step 2: 处理数据
const dataX = data.map(item => ({ ...item, value: Number(item.value) }));
// Step 2: 载入数据源
chart.source(dataX);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart
.interval()
.position('name*value')
.color('name');
// Step 4: 渲染图表
chart.render();
}
}, []);
return (
<div className={styles.chartWrap}>
<div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
{title}
</div>
{isTpl ? <img src={ChartImg} alt="dooring chart" /> : <canvas ref={chartRef}></canvas>}
</div>
);
};
export default memo(XChart);
Вышеуказанные компоненты диаграммы в основном упакованы, и если есть больше потребностей на заказ, они также могут быть добавлены. Мы используем наш кодtypescriptа такжеReact HooksРазработка, с целью оптимизации компонента, мы использовалиmemo, если вы не знакомы с этими техническими моментами, вы можете перейти к моему более позднемуreact hooksа такжеtypescriptПохожие статьи для изучения.
Вышеизложенное только завершает инкапсуляцию основных визуальных компонентов.Следующим фокусом является реализация связи между визуальными компонентами и редактором форм.
2.3 Создайте редактор таблиц и интегрируйте его вantdв виде
Реализация редактора форм в основном основана наantdизTableКомпоненты для достижения, когда мы нажимаем на источник данных, появляется редактор таблиц, давайте посмотрим на эффект:Мы можем напрямую редактировать источник данных, например изменять данные, удалять данные, добавлять данные, то естьCURDэтого процесса. И он поддерживает импорт данных Excel, который автор реализует в следующей главе.
Принцип редактируемой таблицы заключается в добавлении в таблицу состояния, которое делится на режим просмотра и режим редактирования.Режим редактирования использует поле ввода и сохраняет/переключает состояние просмотра, когда оно не в фокусе. Логика добавления строки в основном заключается в динамической вставке части данных.Реализация этой части также относительно проста.Друзья, интересующиеся конкретной реализацией, могут обратиться к моемуисходный код.
Вот некоторые ссылки на код:
// 添加行
handleAdd = () => {
const { count, dataSource } = this.state;
const newData = {
key: count,
name: `dooring ${count}`,
value: 32,
};
const newDataSource = [...dataSource, newData];
this.setState({
dataSource: newDataSource,
count: count + 1,
});
this.props.onChange && this.props.onChange(newDataSource);
};
// 保存行数据
handleSave = row => {
const newData = [...this.state.dataSource];
const index = newData.findIndex(item => row.key === item.key);
const item = newData[index];
newData.splice(index, 1, {
...item,
...row,
});
this.setState({ dataSource: newData });
this.props.onChange && this.props.onChange(newData);
};
This.props.onChange приведенного выше кода в основном предназначен дляantdизFormуметь принимать измененияTable EditorсталиForm«Управляемые компоненты».
2.4 Использованиеjs-xlsxРазобратьExcelфайл и импортировать вTableкак визуальный компонент висточник данных
Для записи источника данных, описанной выше, у нас есть два режима:Ручная записьа такжеимпорт файлов. Импорт файла дизайна в основном предназначен для лучшего взаимодействия с пользователем, здесь для достижения этой функции мы можем использовать популярное сообщество.js-xlsx, профессиональный подключаемый модуль для анализа данных Excel, который может выводить различные типы данных.
Сначала установим его:
npm install xlsx
Код для чтения данных из файла excel выглядит следующим образом:
// 读取本地excel文件
function readLocalFile(file, callback) {
let reader = new FileReader();
reader.onload = function(e) {
let data = e.target.result;
let formData = XLSX.read(data, {type: 'binary'});
if(callback) callback(formData);
};
reader.readAsBinaryString(file);
}
С помощью приведенного выше кода нам нужно только привязать событие к кнопке, чтобы импортировать Excel, и проанализировать данные для реализации функции импорта. Каждый может попробовать.
Вышеупомянутое в основном реализует нашу реальную конструкцию системы, и принципы реализации следующих радиолокационных диаграмм, линейных диаграмм и т. Д. Также аналогичны. Давайте посмотримH5-DooringНастроено несколько случаев:
Конечно, вы также можетеH5-Dooringнастроить свой собственныйПанель визуализации данных H5.
3. Резюме
Автор вышеуказанного туториала был интегрирован вH5-DooringДля некоторых более сложных интерактивных функций это также может быть реализовано с помощью разумного дизайна, и вы можете исследовать и исследовать самостоятельно.
адрес гитхаба:Онлайн-редактор H5 H5-Dooring
наконец
Если вы хотите получить больше знаний о внешнем интерфейсе и реальных боевых действиях, таких как игры H5, webpack, node, gulp, css3, javascript, nodeJS, визуализация данных холста и т. д., добро пожаловать на совместное изучение и обсуждение в разделе «Интересный интерфейс». и исследуйте границы интерфейса вместе.