Создание на JavaScript 3D-блочной диаграммы с закругленными краями

Здравствуйте!

Это моя первая статья здесь, и я хотел показать вам, как я создал простую, но удивительную анимированную 3D-диаграмму с динамически окрашенными столбцами в зависимости от их высоты.

Диаграмма отображается с помощью NodeJS, Visual Studio Code и LightningChart JS’ BoxSeries3D, типа серии, способного отображать любое количество блоков, а также позволяющего одиночные полноуровневые модификации (расположение, размер, цвет) в любой момент во время выполнения.

В примере также показано, как использовать функцию закругленных краев. Эта характеристика графика активна по умолчанию, но может быть отключена (если вы используете BoxSeries3D.setRoundedEdges).

В идеале, вы должны скачать проект, чтобы следовать этой статье. Файл имеет формат RAR, и вы можете получить его отсюда:
3D Box Series Project (RAR)

Библиотека lcjs

Для тех, кто еще не знаком с LightningChart JS, это высокопроизводительная библиотека (также доступна для .NET), в которой представлено около 100+ типов диаграмм, включая XY-диаграммы, линейные серии, поверхностные диаграммы, тепловые карты, картографические диаграммы и другие типы.

Большим преимуществом библиотеки «lcjs» является ее высокопроизводительная способность отображать миллионы и миллиарды точек данных в приложениях для построения графиков в реальном времени с высокой частотой кадров в секунду и использованием минимальных ресурсов.

Библиотека lcjs также имеет аппаратное ускорение, а графики отображаются в WebGL.

С учетом сказанного, давайте настроим шаблон нашего проекта.

Настройка шаблона

  1. Пожалуйста, скачайте шаблон, который предоставлен в этой статье.
  2. Вы увидите дерево файлов, подобное этому:

  1. Теперь откройте новый терминал в Visual Studio Code
  2. Как обычно в Node JS проекте, для начала нам нужно будет запустить команду NPM Install.

Это будет все для нашей начальной установки.

А теперь давайте кодить 🙂

CHART.ts

Внутри этого файла вы увидите всю логику, необходимую для создания нашего графика, настройки анимации и форматирования данных.

  1. Объявим константу lcjs, которая будет ссылаться на нашу библиотеку @arction/lcjs.
  2. Извлеките необходимые классы из lcjs.
const lcjs = require('@arction/lcjs')

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    AxisScrollStrategies,
    PalettedFill,
    ColorRGBA,
    LUT,
    UILayoutBuilders,
    UIOrigins,
    UIElementBuilders,
    Themes
} = lcjs
Войдите в полноэкранный режим Выход из полноэкранного режима
  1. Создание объекта графика:
const chart3D = lightningChart().Chart3D( {
    disableAnimations: true,
    theme: Themes.lightNew,
} )
    .setTitle( 'BoxSeries3D with rounded edges enabled' )
Вход в полноэкранный режим Выход из полноэкранного режима
  • disableAnimations:
    Отключить все анимации для графика.
    После вызова этой функции анимации (масштабирование, масштабирование) для всех осей будут отключены. После этого анимации должны быть воссозданы вручную.

  • Тема:
    Библиотека LightningChart предлагает коллекцию реализаций по умолчанию, доступ к которым можно получить с помощью тем.

Цветовая тема компонентов должна быть указана при их создании и не может быть изменена впоследствии (без уничтожения и воссоздания компонента). Более подробная информация об этом здесь.

chart3D.getDefaultAxisY()
    .setScrollStrategy( AxisScrollStrategies.expansion )
    .setTitle( 'Height' )

chart3D.getDefaultAxisX()
    .setTitle( 'X' )

chart3D.getDefaultAxisZ()
    .setTitle( 'Z' )
Вход в полноэкранный режим Выход из полноэкранного режима
  • getDefaultAxisY: Получает ось Y.
    setScrollStrategy: Указывает стратегию прокрутки оси. Это определяет, куда прокручивать ось, основываясь на текущем представлении и границах серии.

  • getDefaultAxisX: Получает ось X.

  • getDefaultAxisz: получает ось z.

const boxSeries = chart3D.addBoxSeries()
const resolution = 10
Вход в полноэкранный режим Выход из полноэкранного режима
  • const boxSeries: .addBoxSeries = Создает серию для визуализации больших наборов индивидуально настраиваемых 3D-боксов.

  • const resolution: Константа, которая будет влиять на количество столбцов, отображаемых на 3D-диаграмме.
    Разрешение = 50

const lut = new LUT( {
    steps: [
        { value: 0, color: ColorRGBA( 0, 0, 0 ) },
        { value: 30, color: ColorRGBA( 255, 255, 0 ) },
        { value: 45, color: ColorRGBA( 255, 204, 0 ) },
        { value: 60, color: ColorRGBA( 255, 128, 0 ) },
        { value: 100, color: ColorRGBA( 255, 0, 0 ) }
    ],
    interpolate: true
} )
Вход в полноэкранный режим Выход из полноэкранного режима
  • LUT: (Look Up Table) Класс стиля для описания таблицы цветов с соответствующими значениями поиска (числами).

Экземпляры LUT, как и все классы стилей LCJS, неизменяемы, что означает, что его сеттеры не изменяют фактический объект, а возвращают совершенно новый измененный объект.

Свойства LUT:

шаги: Список шагов цвета (пара цвет + числовое значение).
interpolate: true включает автоматическую линейную интерполяцию между цветовыми шагами.

Вы можете узнать больше о классах, используемых в lcjs здесь

  • boxSeries: Для приложений с огромным количеством маленьких боксов лучше отключить для повышения производительности.
boxSeries
    .setFillStyle( new PalettedFill( { lut, lookUpProperty: 'y' } ) )
    // Specify edge roundness.
    // For applications with massive amounts of small Boxes, it is wise to disable for performance benefits.
    .setRoundedEdges( 0.4 )
Вход в полноэкранный режим Выход из полноэкранного режима
  • createWaterDropDataGenerator: Настраивает пользовательские свойства для 3D-графика. Некоторые константы, которые мы создали ранее, будут использованы в этом методе.
createWaterDropDataGenerator()
    .setRows( resolution )
    .setColumns( resolution )
    .generate()
Войти в полноэкранный режим Выйти из полноэкранного режима

setRows: Создает и добавляет количество рядов, указанное в константе [resolution].

setColumns: Создает и добавляет количество столбцов, указанное в константе [разрешение].

const step = () => {
            const result = []
            for ( let x = 0; x < resolution; x++ ) {
                for ( let y = 0; y < resolution; y++ ) {
                    const s = 1
                    const height = Math.max(
                        waterdropData[y][x] +
                        50 * Math.sin( ( t + x * .50 ) * Math.PI / resolution ) +
                        20 * Math.sin( ( t + y * 1.0 ) * Math.PI / resolution ), 0 )
                    const box = {
                        xCenter: x,
                        yCenter: height / 2,
                        zCenter: y,
                        xSize: s,
                        ySize: height,
                        zSize: s,
                        // Specify an ID for each Box in order to modify it during later frames, instead of making new Boxes.
                        id: String( result.length ),
                    }
                    result.push( box )
                }
            }
Вход в полноэкранный режим Выход из полноэкранного режима
  • const step: Эта константа создаст «капли воды», равные количеству разрешений, указанных ранее.

waterdropData: Генерирует сетку данных, содержащую «капли воды», которые подобны пятнам более открытой области в сгенерированных данных тепловой карты. Диапазон генерируемых данных зависит от WaterDropDataOptions.

Для создания нового экземпляра генератора данных капель воды используйте фабрику createWaterDropDataGenerator.

Каждый созданный объект будет добавлен к объекту массива результатов.

boxSeries
    .invalidateData( result )

t += 0.1
requestAnimationFrame( step )
Вход в полноэкранный режим Выход из полноэкранного режима

Объект массива result со всей коллекцией будет добавлен к объекту boxSeries.

  • requestAnimationframe: Указывает браузеру, что перед следующим перерисовкой необходимо создать новую анимацию.

npm start:

Наконец, откройте новый терминал и выполните в нем команду npm start, чтобы визуализировать график на локальном сервере:

Заключительные мысли

Вот окончательный результат

Это был простой график и часть новой серии JS-графиков, о которых я буду писать.

Библиотека, используемая здесь, — LightningChart JS, которая включает в себя от базовых до узкоспециализированных графиков, включая XY, линейные ряды, тепловые карты, поверхностные графики и вот этот, 3D Box Series.


Автор:
Омар Урбано | инженер-программист
Найти меня на LinkedIn

Оцените статью
devanswers.ru
Добавить комментарий