Горизонтальная метка диаграммы с использованием Vue-chart.js - PullRequest
Новая
       19

Горизонтальная метка диаграммы с использованием Vue-chart.js

0 голосов
/ 12 мая 2018

Я разработал горизонтальную гистограмму, используя Vue-chart.js, все данные и метки получены из API. Проблема в том, что значение также отображается вместе с меткой. Как я могу скрыть значение рядом с меткой? Изображение приведено ниже

enter image description here

У меня есть следующий код. 

import { HorizontalBar } from 'vue-chartjs'

export default {
    name: 'diagram',
    extends: HorizontalBar,
    data: () => ({
        chartData: '',
        score: {},
        value: [],
        keys: [],
        options: {
            scales: {
                xAxes: [{
                    ticks: {
                        scaleShowLabels:false,
                    }
                }],
                yAxes: [{
                    ticks: {
                        scaleShowLabels:false,
                        mirror: true
                    }
                }]
            },
            responsive: true,
        },

        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: 'my-username',
                password: 'my-password'
            },
        }).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);
                }
            }
        });
        this.fillData()

    },
    mounted(){
        this.renderChart(this.chartData, this.options);

    },

    methods: {

        fillData ()  {
            this.chartData = {

                labels: this.keys,

                datasets: [
                    {
                        fillColor: "#ffecbf",
                        strokeColor: "#dacdd2",
                        data: this.value,

                    }

                ],

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

пожалуйста, помогите мне. Заранее спасибо.

...