Пользовательская легенда с Vue -Cli и Vue -chartjs - PullRequest
Новая
       27

Пользовательская легенда с Vue -Cli и Vue -chartjs

0 голосов
/ 08 мая 2020

Создаю заявку на расчет кредита. Теперь я хочу динамически отображать значения указанных c сумм ссуды рядом с каждым элементом в моей легенде. К сожалению, я не могу понять, как legendCallback работает с vue -chart js. Это мой код на данный момент:

Шаблон 

 <template>
  <div>
    <div class="chart-container">
      <app-piechart :chart-data="datacollection" :options="options"></app-piechart>
    </div>
    <div>

  </div>
</template>

JS

import { mapGetters } from 'vuex'
  import { EventBus } from '../events/updatechart.js'
  import PieChart from '../charts/piechart'

  export default {
    components: {
      'app-piechart': PieChart
    },
    data () {
      return {
        datacollection: {},
        options: {},
        total: 0
      }
    },
    mounted () {
      this.fillData()
    },
    created () {
      EventBus.$on('updatechart', () => {
        this.fillData()
        this.fillLabels()
      })
    },
    methods: {
      fillData () {
        this.datacollection = {
          labels: ['Kontokorrentrahmen', 'Sollzins (p. A)', 'Liquiditätsprovision'],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: ['#f87979', '#FF8148', '#FFE59E'],
              data: [this.getKonto, this.sollzinsCalc, this.liqprovCalc],
            },
          ],
        },
        this.options = {
            cutoutPercentage: 60,
            legend: {
              position: 'bottom',
              align: 'start',
            },

        }
        this.total = (this.sollzinsCalc + this.liqprovCalc).toFixed(2)
      },
      fillLabels() {
        this.labels = {
          labelKonto: this.getKonto,
          labelSollzins: this.sollzinsCalc,
          labelLiqprov: this.liqprovCalc
        }
      },
    },
    computed: {
      ...mapGetters([
          'getCredit',
          'getKonto',
          'getSollzins',
          'getLiqProv'
      ]),
      sollzinsCalc () {
        return (this.getCredit*this.getSollzins)/100
      },
      liqprovCalc () {
        return ((this.getKonto - this.getCredit)*this.getLiqProv)/100
      }
    }
  }

Может кто-нибудь помочь мне интегрировать legendCallback в этот кусок кода, чтобы я мог показать легенду со значениями диаграммы P ie?

...