使用vue.js和chartist.js创建跟踪平衡进度的图表

我正在进行一些培训，以便更好地学习如何使用vue.js和electron。我决定制作一个简单的应用程序来跟踪交易日的利润/损失。我将使用减法运算计算每天的结束余额和开始余额之间的差额。经过一些麻烦之后，我能够使用vue的

computed

函数获得DOM上的操作结果。我想做的是使用

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    

---

您只需要两个数组即可将数据转换为两个数组，

dates

用于x轴，

value

用于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 chartjs示例：

你能上传一些示例交易数据吗？现在我在记事本中有一个表，其中包含一些数据，我可以将其用作原型，查看更新的quesetionok，你能提供一个小提琴来查看示例的实况吗，我不确定日期的使用情况？这取决于您使用的是哪个图表模块。数据是余额金额，简单的折线图就可以了