时间戳

首页 > 解决方案 > 当父母的高度为 200px 时，chartjs 不跟随高度

chart.js - 当父母的高度为 200px 时，chartjs 不跟随高度

问题描述

我使用 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。

我的问题的工作样本

在设置父生成的html的宽度之后添加maintainAspectRatio之后添加maintainAspectRatio之前在添加维护AspectRatio 之前 添加维护AspectRatio后 设置父级宽度后 在此处输入图像描述

标签： chart.jsvue-chartjs

解决方案

由于您没有提供问题的工作示例，因此无法直接解决。

background-color你想要的结果是可能的，所以这里有一个片段，显示了一个大小为 200 x 200 像素的圆环图（为了清楚起见，我添加了一个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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div>
  <canvas id="chart"></canvas>
</div>

推荐阅读