当父母的身高为200px时chartjs不跟随身高

Question

我正在使用vue-chartjs显示甜甜圈图。我希望图表遵循父母的身高（200px）。

我尝试将选项中的maintainAspectRatio设置为false，它缩小了，但仍不适合父级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 },
    })
  },
}

虽然图表的宽度已适合父div，但图表上方和下方仍然有一些空白空间，导致高度不适合父div。

我的问题的工作示例

添加maintainAspectRatio之前 添加了maintainAspectRatio 设置父级宽度后 生成的html

Answer 1

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

您想要的结果是可能的，因此以下代码段显示了一个甜甜圈图，大小恰好为200px x 200px（为清楚起见，我在using (var client = new WebClient()) { client.Headers.Add("X-FORMS_BASED_AUTH_ACCEPTED", "f"); client.Headers.Add("User-Agent: Other"); client.Credentials = credentials; client.DownloadFile(webUrl, downloadPath); //client.DownloadFileAsync(new Uri(webUrl), fileRelativeUrl); client.Dispose(); } 上添加了background-color）

div

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;
}