Vue-chartjs делает мой отзывчивый график слишком высоким для моего окна

Question

Я создал простую адаптивную диаграмму HTML + JS с chart.js, которая работала хорошо.Я решил сделать это в Vue CLI и поэтому попытался переключить его на vue-chartjs, но одна и та же диаграмма всегда визуализируется примерно на 33% выше моего окна и поэтому представляет вертикальные полосы прокрутки (ширина в порядке).Я воссоздал проблему с образцом тривиального графа, с которым я рендерил:

import {Line} from 'vue-chartjs'
export default {
  extends: Line,
  mounted () {
    this.renderChart(data, options)
  } 
} 

Обратите внимание, что data тривиально, а options равно {}.

Если я использую диаграмму.js в моем компоненте Vue, вместо vue-chartjs, тогда он работает нормально.Т.е. я ничего не делаю, кроме удаления приведенного выше кода из моего компонента и изменения его на следующий, после чего он хорошо отрисовывается, как и мой пример HTML + chart.js.

import Chart from 'chart.js'
function mount(el) {
    return new Chart(
        document.getElementById(el).getContext('2d'), {
        type: 'line',
        data: data,
        options: options,
    })
}

export default {
    template: '<canvas id="chart"></canvas>',
    mounted () {
        self.chart = mount('chart')
    }
}

Я использую значение по умолчанию responsive: true и maintainAspectRatio: false, конечно, и нигде нет явных настроек CSS или размера.

Почему я не могу заставить диаграмму правильно отображать высоту при использовании vue-chartjs?Я использую vue-chartjs версии 3.4.2, но также попробовал несколько версий назад.Я просмотрел трекер ошибок github, но ничего не видел.

Answer 1

Вы должны передать options как реквизит или локально. Но нужно добавить: желаемый высота , а также параметры, как вы сказали. Вот как это работает для меня:

Параметры:

options: {
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }

В шаблоне:

<bin-graph-weight :chart-data="datacollection" :styles="myStyles" :options="datacollection.options"/>

граф-component.js:

import { Line, mixins } from 'vue-chartjs'

const { reactiveProp } = mixins

export default {
    extends: Line,
    mixins: [reactiveProp],
    props: ['options'],
    mounted () {
    // this.chartData is created in the mixin.
        this.renderChart(this.chartData, this.options)
    },
    // If you want to pass options please create a local options object
    watch: {
        chartData () {
            this.$data._chart.update()
        }
    }
}