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

Question

Я тренируюсь, чтобы лучше научиться использовать vue. js и электрон. Я решил сделать простое приложение, чтобы отслеживать прибыль / убыток торгового дня. Я вычислю разницу между конечным балансом и начальным балансом каждого дня с помощью операции вычитания. После некоторых проблем я могу получить результат операции на DOM с помощью функции computed vue. Я хочу использовать chartist.js для создания простой диаграммы, которая будет отслеживать результаты после ее расчета. Я не уверен, как поступить, я хочу, чтобы на графике было каждое конечное сальдо с расчетной разницей с показанной предыдущей суммой. Может ли кто-нибудь помочь мне с примером?

Мой фактический vue. js код

let app = new Vue({
el: '#app',
data: {
    s: '',
    e: '',
},
computed: {
        tot(){
            return Number(this.e) - Number(this.s);
        }
    }
});

Пример данных:

DAY     INIT. BALANCE  FINAL BALANCE
20/03/2020  2,309.99       2,332.25
23/03/2020  2,332.25       2,343.30
24/03/2020  2,343,30       2,424.62 (+81,32€)
25/03/2020  2,424.62       2,519.56 (+94,94€)
26/03/2020  2,519.56       2,544.46 (+24,90€)
27/03/2020  1,346.00    

Answer 1

Вам нужно только два преобразовать ваши данные в два массива, dates для вашей оси x и values для вашей оси y.

data () {
  return {
    input: [
      ['23/03/2020', '2,309.99', '2,332.25'],
      ['24/03/2020', '2,343,30', '2,424.62'],
      ['25/03/2020', '2,424.62', '2,519.56']
   ],
  }
},
computed: {
   dates () {
       return this.input.map(x=>x[0])
   },
   values () {
       return this.input.map(
         x => parseFloat(x[2].replace(',','')) - 
              parseFloat(x[1].replace(',',''))
       )
   }
}

пример с vue -chart js: https://jsfiddle.net/ellisdod/9vz2qukj/6/