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

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