js

import { HorizontalBar } from 'vue-chartjs'

//import Chart from 'chartjs-plugin-datalabels'


export default {
    name: 'diagram',
    extends: HorizontalBar,

    data: () => ({
        chartData: '',
        score: {},
        value: [],
        keys: [],
        options: {
            scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero: true
                        // barThickness: 150,
                        //barPercentage: 0.5
                        // scaleShowLabels:false,

                    }
                }],
                yAxes: [{

                    //display: false
                    //beginAtZero: true,

                    // scaleShowLabels:false,
                    // barPercentage: 0.5,
                    //barThickness: 150,
                    // mirror: true
                    stacked: true,
                    ticks:{
                        beginAtZero: true,
                        mirror:true
                    }
                }]
            },
            scaleShowLabels: false
            // responsive: true,
            /*legend: {
                display: false,
            },
            */
        },
                responsive: true,
        maintainAspectRatio: false

    }),
    created () {

        // Overwriting base render method with actual data.
        this.$http({
            method: 'get',
            url: this.base_url + '/exam/api/score/' + this.$store.state.user.id + '/',

            auth: {
                username: 'l360_mobile_app',
                password: 'itsd321#'
            },
        }).then(res => {

            console.log(res);
            if (res.status == '200') {
                console.log(res.data);
                this.score = res.data;
                for (let v  in  this.score) {
                    this.value.push(this.score[v]);
                }
                for (let key  in  this.score) {
                    this.keys.push(key);
                }


                console.log(this.keys);
                console.log(this.value);
            }
        });
        this.fillData()

    },
    mounted(){

        this.renderChart(this.chartData, this.options);



    },

    methods: {

        fillData ()  {
            var context = this.$refs.canvas.getContext('2d');
            this.chartData = new Chart(context,{

                labels: this.keys,

                datasets: [
                    {
                        fillColor: "#ffecbf",
                        strokeColor: "#dacdd2",
                        //backgroundColor: '#f87979',
                        data: this.value,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],


                    }

                ],




            })
        }
    },
    watch: {
        data: function () {
            this._chart.destroy();
            this.renderChart(this.chartData, this.options);
        },
    },


}