当 parent 的高度为 200px 时，chartjs 不跟随高度

Question

我正在使用 vue-chartjs 来显示圆环图。我希望图表遵循 parent 的高度 (200px)。

我试过在选项里把maintainAspectRatio设为false，它缩小了，但还是装不进parent div.

这是我用于图表的选项。

import { Pie } from 'vue-chartjs'

export default {
  extends: Pie,
  name: 'Pie_Chart',
  props: ["rating"],
  mounted() {
    this.renderChart({
      legend: { display: false },
      datasets: [{
        backgroundColor: ['#DAE02A', '#6D6D6D'],
        data: [1000, this.$props.rating],
        borderWidth: 0
      }]
    }, {
      responsive:true,
      maintainAspectRatio: false,
      cutoutPercentage: 80,
      legend: { display: false },
      tooltips: { enabled: false },
      hover: { mode: false },
    })
  },
}

虽然图表的宽度已经适应了parentdiv，但是图表的上下还有一些空白space导致高度无法适应parent div.

我的问题的工作样本

在添加 maintainAspectRatio 之前 添加 maintainAspectRatio 后 设置宽度后parent 生成html

Answer 1

由于您没有提供working example of your problem无法直接解决

你想要的结果是可能的，所以这里有一个片段显示了一个大小正好为 200px x 200px 的圆环图（为了清楚起见，我在 div 中添加了 background-color）：

new Chart(document.getElementById("chart"), {
  type: "doughnut",
  data: {
    datasets: [{
      data: [1, 4]
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutoutPercentage: 80,
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    hover: {
      mode: false
    }
  }
});

div {
  background-color: #ccf;
  width: 200px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div>
  <canvas id="chart"></canvas>
</div>

当 parent 的高度为 200px 时，chartjs 不跟随高度

chartjs not following height when parent's height is 200px

chart.js

vue-chartjs

我的问题的工作样本