Создание диаграммы в реальном времени с помощью Vue.js

Создание диаграммы в реальном времени с помощью Vue.js

От автора: в последнее время данные стали очень важной частью нашей жизни, и понимание того, что данные одинаково важны. Нет смысла иметь данные, если вы не можете отслеживать или анализировать их, особенно если эти данные имеют какое-либо отношение к финансам.

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

На диаграмме приборной панели будет работать Node.js + Express в качестве внутреннего сервера и Vue + vue-chartjs для интерфейса, загруженного vue-cli.

Создание приложения с помощью vue-cli

vue-cli — это простой CLI для создания проектов Vue.js. Мы установим vue-cli, а затем используем его для загрузки приложения с помощью шаблона webpack со следующими командами:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Совет. шаблон webpack-simple — это простая настройка webpack + vue-loader для быстрого прототипирования.

Настройка сервера Node.js

Следующее, что нужно сделать, это настроить сервер, который поможет нам общаться с Pusher. Я собираюсь предположить, что и Node и npm установлены в вашей системе. Затем мы установим зависимости, которые мы будем использовать для сервера Node.

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

Еще одна вещь, нам понадобится точка входа / файл для нашего Node-сервера. Мы можем сделать это, создав файл server.js в корне приложения.

Настройка Pusher

Чтобы реализовать функциональность в реальном времени, нам понадобится мощность Pusher. Если вы еще этого не сделали, зарегистрируйте учетную запись Pusher и создайте новое приложение. Когда ваше новое приложение будет создано, получите свой app_id, ключи и кластер из панели инструментов Pusher.

Настройка приложения

Теперь, когда у нас есть учетная запись Pusher, и мы установили зависимости, необходимые для бэкэнд Node.js, давайте создавать. Давайте напишем код для файла server.js.

Давайте посмотрим, что здесь происходит. Мы требуем Express, path, body-parser и Pusher, и мы инициализировали express () с приложением.

Мы используем body-parser для извлечения всей части входящего потока запросов и выставляем его на req.body.

Pusher также инициализируется учетными данными приложения и кластером из панели управления. Обязательно обновите это, иначе сервер node не будет подключен к панели управления. Наконец, сервер Node будет работать на 5000 порте.

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

Во-первых, у нас есть объект costList с данными, содержащими расходы и доходы за определенные дни.

Этот маршрут просто отправляет объект costList как JSON. Мы используем этот маршрут для получения данных и отображения на интерфейсе.

Маршрут /expense/add делает очень много. Это POST-маршрут, что означает, что мы будем ожидать некоторых входящих данных (в данном случае, суммы расходов и суммы дохода).

Затем мы подталкиваем этот новый доход и расходы к существующему, после чего мы также подталкиваем обновленный costList к Pusher.

Наконец, мы отправляем JSON в ответ на маршрут, содержащий последние доходы, расходы, дату и обновленные расходыList. Ваш окончательный server.js должен выглядеть следующим образом:

Построение Frontend (Vue + vue-chartjs)

Большая часть работы с интерфейсом будет выполнена внутри папки src/components. Перейдите в этот каталог, и вы увидите файл Hello.vue. Вы можете либо удалить этот файл, либо переименовать его в Home.vue поскольку нам понадобится файл Home.vue внутри папки компонентов.

Прежде чем мы начнем с построения диаграммы и отображения ее, мы должны сделать пару вещей. Откройте файл App.vue в папке src и замените следующим кодом:

Затем мы установим vue-chartjs, momentjs, pusher-js (библиотека Javascript Pusher) и axios (мы будем использовать axios для создания запросов API). А затем добавьте их в приложение Vue.js.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Как только это будет сделано, мы импортируем axios и зарегистрируем его глобально в нашем приложении. Мы можем это сделать, открыв файл main.js в папке src.

Затем создадим компонент Vue.js, который поможет отобразить нашу диаграмму. Мы собираемся использовать это, чтобы указать, какой тип диаграммы мы хотим, настроить его внешний вид и как он себя ведет.

Затем мы импортируем этот компонент в компонент Home.vue и используем его там. Это одно из преимуществ vue-chartjs, оно работает путем импорта базового класса диаграммы, который мы затем можем расширить. Давайте продолжим и создадим этот компонент. Создайте новый файл с именем LineChart.vue внутри папки src/components и отредактируйте с помощью приведенного ниже кода.

В приведенном выше блоке кода мы импортировали линейную диаграмму из vue-chartjs и модуля mixins. Chart.js обычно не предоставляет возможность автоматического обновления всякий раз, когда набор данных изменяется, но это можно сделать в vue-chartjs с помощью следующих миксинов: reactiveProp, reactiveData.

Эти миксины автоматически создают chartData в качестве опоры или данных и добавляют наблюдателя. Если данные изменились, диаграмма обновится.

Кроме того, this.renderChart() внутри mounted функции отвечает за отображение диаграммы. this.chartData — это объект, содержащий набор данных, необходимый для диаграммы, и мы получим его, включив его как опору в шаблон Home.vue this.options содержит объект опций, который определяет внешний вид и конфигурацию диаграммы.

Теперь у нас есть компонент LineChart, но как мы можем увидеть нашу диаграмму и проверить ее функциональность в реальном времени? Мы делаем это, добавляя LineChart к нашему компоненту Home.vue а также подписываясь на наш канал Pusher через pusher-js.

Откройте файл Home.vue и измените его следующим образом:

fillData

Эта функция вызывается сразу после того, как приложение смонтировано, и в основном делает запрос API к бэкэнду узла (/ finances) и получает costList.

Запрос GET делается для маршрута /finances Node.js, который, в свою очередь, возвращает последние expensesList и затем мы обрабатываем эти данные с помощью .map Javascript и присваиваем его различным переменным.

addExpenses

В приведенном выше блоке кода используется метод POST-роута для /expense/add для обновления expensesList («не забывайте /expense/add маршрут на сервере Node» отправляет обновленный список expensesList на панель управления Pusher) вместе с данными о доходах, расходах и дате.

Затем он использует данные, полученные от Pusher через channel.bind чтобы снова построить линейную диаграмму и автоматически добавляет новую запись в диаграмму.

fetchData

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

Ваш последний файл Home.vue должен выглядеть следующим образом:

Еще кое-что!

Прежде чем мы сможем запустить наше приложение, нам нужно сделать что-то, называемое API-прокси. API-прокси позволяет нам интегрировать наше приложение vue-cli с backend сервером (в нашем случае — Node-сервер). Это означает, что мы можем запускать сервер dev и бэкэнд API бок о бок и позволить серверу-разработчику проксировать все запросы API на фактический сервер.

Мы можем включить API-прокси, отредактировав параметр dev.proxyTable в config/index.js. Вы можете редактировать с помощью кода ниже.

После этого мы, наконец, готовы увидеть наше приложение, и вы можете запустить npm run dev, чтобы запустить приложение.

Это оно! На этом этапе вы должны иметь диаграмму приборной панели реального времени, которая обновляется в реальном времени.

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

Заключение

Мы видели, как создать базовую линейную диаграмму с ChartJS в Vue с помощью vue-chartjs, а также добавить функции в реальном времени через Pusher.

Затем мы увидели, как использовать реактивные приложения, чтобы сделать ChartJS обновлением своего набора данных, если произошел сбой в наборе данных. Мы также видели, как использовать Pusher для запуска событий на сервере и прослушивания их на стороне клиента с помощью JS.

Вы недавно создали что-нибудь интересное с Pusher, может быть, диаграмма? Дайте знать в ответах ниже.

Автор: Yomi

Источник: https://medium.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree