javascript - VueJs 和 ChartJs - 图表在宽度上响应，但不是高度？

Question

我几乎尝试了所有方法，但无法让图表的高度响应。

宽度工作得很好，它是响应式的并相应地调整，但由于某种原因高度保持锁定在 400 像素？

在我的主 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()
        }
    }
}

标签： javascriptcssvue.jschart.jsvue-chartjs

Answer 1

唯一对我有用的是设置组件的高度和宽度：

<BarChart
   :chart-data="chart2Data"
   :options="chart2Options"
   :key="chart2Trigger"
   :height="2"
   :width="4"
 />