Гистограмма Vue chartjs иногда показывает только ось X и Y, полоса и метки отсутствуют - PullRequest
0 голосов
/ 08 октября 2019

Я пытался выяснить, почему иногда компонент не работает должным образом, но я до сих пор не понимаю, почему в консоли нет информации (нет ошибок, нет предупреждений ...), я использую приведенный ниже скрипт для компонентов гистограммы:

    // Chart.js
    import { Bar } from 'vue-chartjs'

    export default {
        extends: Bar,
        props: ['data', 'labels'],
        mounted() {
            // Overwriting base render method with actual data.
            this.renderBarChart();
        },
        computed: {
            chartData: function () {
                return this.data;
            }
        },
        methods: {
            renderBarChart() {
                var cdata = {
                    labels: this.labels,
                    datasets: [
                        {
                            label: '',
                            backgroundColor: globalSetting.backgroundColors, //global.js loading before 
                            borderColor: globalSetting.borderColor,
                            borderWidth: 1,
                            data: this.chartData
                        }
                    ]
                }
                let options = {
                     legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Levels'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Numbers'
                            }
                        }]
                    }
                }
                this.renderChart(cdata, options);
            }
        },
        watch: {
            data: function () {
                this.renderBarChart();
            },
            deep: true
        }
    }

И в моем html,

<div v-if="!loading">
<p>{{c.chartData}} {{labels}}</p>
 <bar :data="c.chartData" :labels="labels"></bar>
</div>

Иногда , график строится без информации о столбцах и метках (как на изображении ниже), но <p>{{c.chartData}}{{labels}}</p>иметь значения. После обновления страницы все правильно. Любая идея? Спасибо enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...