Vue-chartjs 使我的响应式图表对于我的窗口来说太高了

Question

我用 chart.js 创建了一个简单的响应式 HTML + JS 图表，效果很好。我决定在 Vue CLI 中执行此操作，因此尝试将其切换到 vue-chartjs，但相同的图表总是呈现比我的窗口高约 33%，因此呈现垂直滚动条（宽度很好）。我用一个简单的示例图重新创建了这个问题，我用它来渲染：

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

请注意data是微不足道的options是{}。

如果我在我的 Vue 组件中使用 chart.js，而不是 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

更新：

您应该传递optionsas 道具或本地。但是需要补充：

• 响应：真实
• 保持纵横比：假

所需的高度以及您所说的选项。这是它对我的工作方式：

选项：

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()
        }
    }
}

Answer 2

还存在高度溢出和响应能力的问题，通过引入占据 100% 空间的 Flex 父容器来修复。设置响应和比率选项后（查看相关的Chartjs 文档）：

options: {
  // ..
  responsive: true,
  maintainAspectRatio: true
}

我使用以下 css 填充 100% 的父级（TheChartvue-chartjs 组件在哪里。基本上需要确保图表的父级始终填充其自身父级的 100%）：

vue模板

<v-container class="chart-container">
  <TheChart :chartdata="chartData" :options="chartOptions" />
</v-container>

CSS：

.chart-container {
  flex-grow: 1;
  min-height: 0;

  > div {
    position: relative;
    height: 100%;
  }
}