结合使用vue.js和chartist.js来创建跟踪余额进度的图表 [英] use vue.js with chartist.js to create a chart that track balance progress

问题描述

我正在接受一些培训，以更好地学习如何使用vue.js和electronic.我决定制作一个简单的应用程序来跟踪交易日的利润/亏损.我将通过减法运算来计算每天的期末余额和期初余额之间的差额.遇到一些麻烦之后，我可以使用vue的 computing 函数在DOM上获得操作结果.我想做的是使用 chartist.js 创建一个简单的图表，该图表将在计算结果后跟踪结果.我不确定如何进行操作，我想要的是图表上的每个期末余额以及计算出的与上一个金额的差额.有人可以帮我举个例子吗?

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?

我实际的vue.js代码

My actual vue.js code

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    

推荐答案

您只需要将数据转换为两个数组，x轴的 dates 和 values 为您的y轴.

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

带有vue-chartjs的示例: https://jsfiddle.net/ellisdod/9vz2qukj/6/

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

这篇关于结合使用vue.js和chartist.js来创建跟踪余额进度的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！