VueJ和ChartJs-图表在宽度上有响应，但没有高度？

如何解决VueJ和ChartJs-图表在宽度上有响应，但没有高度？

我已经尝试了几乎所有方法，但无法获得图表的高度以进行响应。

宽度可以完美地工作，具有响应性并可以进行相应的调整，但是由于某种原因，高度保持在400px锁定？

在主Vue应用中，我调用了组件（传递图表数据）：

<ProjectedCumulativeSavings :datacollection="projectData.projectedCumulativeSavings" />

ProjectedCumulativeSavings.vue组件的代码为：

<template>
    <div class="chart-container" >
        <bar-chart
            :chart-data="datacollection"
            :options="options"
            chart-id="projectedCumulativeSavings"
        />
    </div>
</template>

<script>
import BarChart from '../mixins/BarChart.js'

export default {
    components: {
        BarChart
    },props: {
        datacollection: ''
    },data() {
        return {
            options: {
                maintainAspectRatio: false,responsive: true,title: {
                    display: true,text: 'Projected Cumulative Savings',fontSize: 18
                },legend: {
                    display: false
                },scales: {
                    yAxes: [{
                        ticks: {
                            // Include a dollar sign in the ticks
                            callback: function (value,index,values) {
                                return 'R' + value.toLocaleString('en')
                            }
                        }
                    }]
                }
            }
        }
    },created() {
    },computed: {
    }
}
</script>

<style >
.chart-container {
    min-width: 375px;
    max-width: 1024px;
    /* margin: 30px; */
    position: relative;
    width: 100%;
    height: 40vw;
}
</style>

BarChart.js代码为：

import { Bar,mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
    extends: Bar,mixins: [reactiveProp],props: ['options'],mounted() {
        // this.chartData is created in the mixin.
        // If you want to pass options please create a local options object

        this.renderChart(this.chartData,this.options)
    },watch: {
        chartData() {
            this.$data._chart.update()
        }
    }
}

解决方法

我遇到了同样的问题并发现了这个。

https://www.chartjs.org/docs/latest/general/responsive.html#important-note

试试这个

gloSummaryTable

和

    <bar-chart
        :chart-data="datacollection"
        :options="options"
        :styles="myStyles"  <-- add this
        chart-id="projectedCumulativeSavings"
    />