Построить диаграмму в реальном времени с vue.js

Автор оригинала: Yomi Eluwande.

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

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

Диаграмма приборной панели будет питаться от Node.js + Экспресс как бэкэнд сервер и Vue + Vue-Chartjs Для Bootstrapped Frontend по Vue-Cli Отказ

Леса на приложение с Vue-Cli

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

npm install -g vue-cli

vue init webpack-simple realtime-chart-pusher

СОВЕТ: WebPack-Simple Template – это простой веб-папак + настройки Vue-Loader для быстрой прототипирования. Вы можете прочитать больше об этом здесь Отказ

Настройка Node.js Server

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

npm install body-parser express nodemon pusher

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

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

Настройка толкателя

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

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

Теперь, когда у нас есть учетная запись PUSHER, и установила зависимости, необходимые для Node.js Backend, давайте создам строительство.

Давайте напишем код для server.js файл.

const express = require('express');
const path = require('path');
const bodyParser = require("body-parser");
const app = express();
const Pusher = require('pusher');

const pusher = new Pusher({
    appId: 'YOUR_APP_ID',
    key: 'YOUR_APP_KEY',
    secret: 'YOUR_APP_SECRET',
    cluster: 'eu',
    encrypted: true
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname + '/app')));

app.set('port', (process.env.PORT || 5000));

app.listen(app.get('port'), function() {
    console.log('Node app is running on port', app.get('port'));
});

Давайте посмотрим, что здесь происходит. Нам требуется экспресс, путь, тело-парсеров и толкатель, а также инициализировали Express () с приложением.

Мы используем Body-Parser для извлечения всего части тела входящего потока запроса и разоблачить его на REQ .body.

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

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

let expensesList = {
    data: [
        {
            date: "April 15th 2017",
            expense: 100,
            income: 4000
        },
        {
            date: "April 22nd 2017",
            expense: 500,
            income: 2000
        },
        {
            date: "April 24th 2017",
            expense: 1000,
            income: 2300
        },
        {
            date: "April 29th 2017",
            expense: 2000,
            income: 1234
        },
        {
            date: "May 1st 2017",
            expense: 500,
            income: 4180
        },
        {
            date: "May 5th 2017",
            expense: 4000,
            income: 5000
        },
    ]
}

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

app.get('/finances', (req,res) => {

res.send(expensesList);

});

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

app.post('/expense/add', (req, res) => {
  let expense = Number(req.body.expense)
  let income = Number(req.body.income)
  let date = req.body.date;
  
  let newExpense  = {
    date: date,
    expense: expense,
    income: income
  };

  expensesList.data.push(newExpense);

  pusher.trigger('finance', 'new-expense', {
    newExpense: expensesList
  });

  res.send({
    success : true,
    income: income,
    expense: expense,
    date: date,
    data: expensesList
  })
});

/Expence/Добавить Маршрут очень много. Это почтовый маршрут, что означает, что мы ожидаем некоторые входящие данные (в этом случае, сумма расхода и сумма дохода).

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

Наконец, мы отправляем JSON в качестве ответа на маршрут, содержащий новейшие доходы, расходы, дату и обновленные эксплуатации.

Ваш финал server.js должен выглядеть так:

const express = require('express');
const path = require('path');
const bodyParser = require("body-parser");
const app = express();
const Pusher = require('pusher');

const pusher = new Pusher({
    appId: 'APP_ID',
    key: 'YOUR_KEY',
    secret: 'YOUR_SECRET',
    cluster: 'YOUR_CLUSTER',
    encrypted: true
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname + '/app')));

app.set('port', (process.env.PORT || 5000));

let expensesList = {
    data: [
        {
            date: "April 15th 2017",
            expense: 100,
            income: 4000
        },
        {
            date: "April 22nd 2017",
            expense: 500,
            income: 2000
        },
        {
            date: "April 24th 2017",
            expense: 1000,
            income: 2300
        },
        {
            date: "April 29th 2017",
            expense: 2000,
            income: 1234
        },
        {
            date: "May 1st 2017",
            expense: 500,
            income: 4180
        },
        {
            date: "May 5th 2017",
            expense: 4000,
            income: 5000
        },
    ]
}

app.get('/finances', (req,res) => {
    res.send(expensesList);
});

app.post('/expense/add', (req, res) => {
    let expense = Number(req.body.expense)
    let income = Number(req.body.income)
    let date = req.body.date;

    let newExpense  = {
        date: date,
        expense: expense,
        income: income
    };

    expensesList.data.push(newExpense);

    pusher.trigger('finance', 'new-expense', {
        newExpense: expensesList
    });

    res.send({
        success : true,
        income: income,
        expense: expense,
        date: date,
        data: expensesList
    })
});

app.listen(app.get('port'), function() {
    console.log('Node app is running on port', app.get('port'));
});

Создание интерфейса (Vue + Vue-Chartjs)

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

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

Далее мы установим Vue-Chartjs , Momentjs , PUSHER-JS (Библиотека JavaScript Pusher) и Axios (Мы будем использовать AXIOS, чтобы сделать запросы API). А затем добавьте их в приложение Vue.js.

npm install axios vue-chartjs pusher-js moment

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

// src/main.js
import Vue from 'vue'
import App from './App'
import axios from 'axios' // we import axios from installed dependencies

Vue.config.productionTip = false

Vue.use(axios) // we register axios globally

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '',
  components: { App }
})

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

Затем мы импомнем этот компонент в Home.vue компонент и использовать его там. Это одно из преимуществ Vue-Chartjs Он работает, импортируя класс базового диаграммы, который мы затем можем продлить. Давайте пойдем вперед и создадим этот компонент. Создайте новый файл под названием Linechart.vue внутри SRC/Компоненты Папка и редактировать с кодом ниже.

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

реактива
Реактивы

Эти смесины автоматически создают ChartData как опоры или данные и добавьте наблюдатель. Если данные изменились, график будет обновляться. Читать дальше здесь Отказ

Кроме того, this.renderchart () Функция внутри монтируется Функция отвечает за рендурирование диаграммы. Это.chartdata это объект, содержащий набор данных, необходимый для графика, и мы получим это, включая его в качестве опоры в Home.vue Шаблон, Это события Содержит объект параметров, который определяет внешний вид и конфигурацию графика.

У нас сейчас есть Linechart Компонент, но как мы можем увидеть наш график и проверить свою функциональность в реальном времени? Мы делаем это, добавив Linechart нашему Home.vue Компонент, а также подписки на наш канал толкателя через PUSHER-JS.

Откройте Home.vue Файл и редактировать со следующим:

Filldata

Эта функция немедленно вызывается приложение монтируется И в основном он делает запрос API к Backend (/Finances) и извлекает экспенкт.

fillData () {
    axios.get('/finances')
      .then(response => {
        let results = response.data.data
    
        let dateresult = results.map(a => a.date)
        let expenseresult = results.map(a => a.expense)
        let incomeresult = results.map(a => a.income)
    
        this.expense = expenseresult
        this.income = incomeresult
        this.date = dateresult
    
        this.datacollection = {
          labels: this.date,
          datasets: [
            {
              label: 'Expense',
              backgroundColor: '#f87979',
              data: this.expense
            },
            {
              label: 'Income',
              backgroundColor: '#5bf8bf',
              data: this.income
            }
          ]
        }
      })
      .catch(error => {
        console.log(error)
      })
  }

Запрос получается на /Финансы Node.js Маршрут, который, в свою очередь, возвращает последние Экспенезы И мы тогда манипулируем этими данными с JavaScript’s .map и назначить его различным переменным.

AddexPense

addExpenses () {
  //We first get the new entries via the v-model we defined on the income and expense input tag
  let expense = this.expenseamount
  let income = this.incomeamount
  let today = moment(this.entrydate).format('MMMM Do YYYY') //Formats the date via momentJS
  
  //Sends a POST request to /expense/new along with the expense, income and date.
  axios.post('/expense/add', {
      expense: expense,
      income: income,
      date: today
  })
    .then(response => {
      this.expenseamount = ''
      this.incomeamount = ''
      //We are bound to new-expense on Pusher and once it detects a change via the new entry we just submitted, we use it to build the Line Chart again.
      channel.bind('new-expense', function(data) {
          let results = data.newExpense.data
  
          let dateresult = results.map(a => a.date);
          let expenseresult = results.map(a => a.expense);
          let incomeresult = results.map(a => a.income);
          
          //The instance data are updated here with the latest data gotten from Pusher
          this.expense = expenseresult
          this.income = incomeresult
          this.date = dateresult
  
          //The Chart's dataset is updated with the latest data gotten from Pusher
          this.datacollection = {
              labels: this.date,
              datasets: [
                  {
                      label: 'Expense Charts',
                      backgroundColor: '#f87979',
                      data: this.expense
                  },
                  {
                      label: 'Income Charts',
                      backgroundColor: '#5bf8bf',
                      data: this.income
                  }
              ]
          }
      });
  })
}

Вышеуказанное блок кода просто использует маршрут Post Method на /Expence/Добавить Обновить Экспенезы (Помните /Excess/Add Маршрут на сервере узла отправляет обновленные Экспензовать список на панель Dashboard) наряду с доходом, расходами и датами данных.

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

Fetchdata

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

fetchData () {
   //We are bound to new-expense on Pusher and it listens for changes to the dataset so it can automatically rebuild the Line Chart in realtime.    
    channel.bind('new-expense', data => {
        let _results = data.newExpense.data
        let dateresult = _results.map(a => a.date);
        let expenseresult = _results.map(a => a.expense);
        let incomeresult = _results.map(a => a.income);
        
        //The instance data are updated here with the latest data gotten from Pusher
        this.expense = expenseresult
        this.income = incomeresult
        this.date = dateresult

        //The Chart's dataset is updated with the latest data gotten from Pusher
        this.datacollection = {
            labels: this.date,
            datasets: [
                {
                    label: 'Expense Charts',
                    backgroundColor: '#f87979',
                    data: this.expense
                },
                {
                    label: 'Income Charts',
                    backgroundColor: '#5bf8bf',
                    data: this.income
                }
            ]
        }
    });
}

Ваш последний файл Home.Vue должен выглядеть так:

Еще кое-что!

Прежде чем мы сможем запустить наше приложение, нам нужно сделать что-то называемое API проксирование Отказ API Proxcying позволяет нам интегрировать наше приложение Vue-Cli с помощью Backeng Server (сервер узла в нашем случае). Это означает, что мы можем запустить SEV Server и Backend API бок о бок, и пусть Proxy Server Server все API запросит на фактическую бэкэну.

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

proxyTable: {
  '/expense/add': {
    target: 'http://localhost:5000',
    changeOrigin: true
  },
  '/finances': {
    target: 'http://localhost:5000',
    changeOrigin: true
  },
}

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

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

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

Заключение

Мы видели, как построить базовую диаграмму линии с Chartjs в Vue с помощью Vue-Chartjs, а также добавленные функции в реальном времени благодаря топлению.

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

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

Этот пост впервые появился на Pusher Blog Отказ

Realtime Chart with Vue and Pusher

Expense and Income Tracker

Add New Entry

Realtime Chart with Vue and Pusher

Expense and Income Tracker

Add New Entry

Леса на приложение с Vue-Cli

Настройка Node.js Server

Настройка толкателя

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

Создание интерфейса (Vue + Vue-Chartjs)

Realtime Chart with Vue and Pusher

Expense and Income Tracker

Add New Entry

Filldata

AddexPense

Fetchdata

Realtime Chart with Vue and Pusher

Expense and Income Tracker

Add New Entry

Еще кое-что!

Заключение

Читайте ещё по теме: