flexbox - vue-chartjs 在 flexbox 中无法正常工作，并且当调整大小图表变为空白时

Question

我正在使用 vue-chartjs 但每次我调整它的大小时，它的布局都不再正确了。它超越了屏幕。此外，当我调整它的大小时，图表丢失了，但它会在一段时间后出现，但有时它只是变白。顺便说一句，我将 Bulma 用于我的响应式框架。

它应该看起来像这张照片。

这是我的代码之一

<script>
import { HorizontalBar, mixins } from 'vue-chartjs';

const { reactiveProp } = mixins;

export default {
  extends: HorizontalBar,
  mixins: [reactiveProp],
  props: ['chartData', 'options'],
  mounted() {
    this.renderChart(this.chartData, {
      responsive: true,
      maintainAspectRatio: false,
      responsiveAnimationDuration: 5,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
          },
          barThickness: 10,
          maxBarThickness: 5,
          categoryPercentage: 0.2,
        }],
      },
    });
  },
};
</script>

Answer 1

我想这与这个错误有关：https ://github.com/apertureless/vue-chartjs/issues/288

在最新版本中已修复。所以你应该只更新你的依赖项。