Center chart.js 条形图画布

Answer 1

我最终使用了一些 Javascript：

const chartContainers = Array.from(document.getElementsByClassName('chart-container'));
const chartMaxWidthPercent = 0.9;
const chartMaxHeightPercent = 0.7;

function resizeChartContainers() {
  let maxWidth = chartMaxHeightPercent * window.innerWidth;
  let maxHeight = chartMaxHeightPercent * window.innerHeight;
  let width = Math.min(maxWidth, maxHeight * 2);
  let height = Math.min(maxHeight, maxWidth / 2);
  chartContainers.forEach(container => {
    container.style.width=`${width}px`;
    container.style.height=`${height}px`;
  });
}

window.addEventListener("resize", resizeChartContainers);
resizeChartContainers(); // Initial resize

然后在我的 CSS 中删除了高度和宽度规格：

.chart-container {
  position: relative;
  margin: 0 auto;
}