use vue.js with chartist.js to create a chart that track balance progress

问题

I'm doing some training to better learn how to use vue.js and electron. I've decided to make a simple app to track the profit/loose of a trading day. I will calculate the difference between the end balance and the start balance of every day with a subtraction operation. After some trouble I'm able to get the result of the operation on the DOM using the computed function of vue. What I want to do is to use chartist.js to create a simple chart that will track the results after it is calculated. I'm not sure how to proceed, what I want is to have on the chart every end balance with the calculated difference with the previous amount showed. Can anyone help me with an example?

My actual vue.js code

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

Sample data:

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

回答1:

You just need two convert your data into two arrays, dates for your x-axis and values for your y-axis.

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(',',''))
       )
   }
}

example with vue-chartjs: https://jsfiddle.net/ellisdod/9vz2qukj/6/

来源：https://stackoverflow.com/questions/60881942/use-vue-js-with-chartist-js-to-create-a-chart-that-track-balance-progress

标签

Vue.js

charts

electron