javascript - Chart.js 中的 donut chart 调整问题

Question

每当我更改页面分辨率或大小或缩放页面时，chartjs 调整图表，都可以。 但是当撤消我的最后一个操作时，它不会恢复到原来的大小。实际上，我在页面上所做的每一个操作都会使其变得更大。

这就是我想要的:

这就是我缩放时发生的情况:

function doughnut_config(data, labels, center_text, tooltip_enabled = true) {
  const config = {
    type: 'doughnut',
    data: {
      datasets: [{
        data: data,
        backgroundColor: backgroundColor,
        borderWidth: 0.3
      }],
      labels: labels
    },
    options: {
      legend: false,
      responsive: true,
      maintainAspectRatio: false,
      elements: {
        center: {
          text: center_text
        }
      },
      tooltips: {
        enabled: tooltip_enabled
      }
    }
  };
  return config;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="col-lg-6" style="text-align: center;">
  <canvas id="my_chart" style="height: 160px; "></canvas>
</div>

Answer 1

请确保使用max-height Canvas 上的样式。

例如:

<canvas id=“my_chart" style="max-height: 160px;"></canvas>