保持chart.js甜甜圈的固定宽度和高度在容器中居中

Question

我正在为图表 js 使用 aurelia 插件，并且有一个动态的甜甜圈图表。我已将图表设置为 false，因为我希望它在所有屏幕/设备尺寸中保持固定的宽度和高度。但是，由于画布元素溢出其容器，我无法保持图表居中。如果我在画布元素上设置了最大宽度……它使图表保持居中，但通过挤压它会完全扭曲甜甜圈。查看图片：

这是大屏幕的图表，正确渲染：

当我减小视口时，canvas 元素溢出其容器，使图表保持在“canvas”元素的中心，但它溢出了它的容器，因此它没有居中它应该是：

如果我在画布上设置最大宽度，它会使图表保持居中，但会严重扭曲甜甜圈：

我不能为 chart.js 甜甜圈使用响应选项，因为这会导致它在某些屏幕尺寸下变得太小。我怎样才能在保持图表正确居中的同时保持这个固定的宽度和高度。这是我的 chart.js 选项：

        this.doughnutOptions = {
            cutoutPercentage: 80,
            responsive: false,
            tooltips: {
                enabled: false
            }
        }

以及我如何使用 Aurelia 渲染图表...

<chart id="dynamic-doughnut-chart" type="doughnut" should-update="true" throttle="2000" data.bind="dynamicDoughnutData" native-options.bind="doughnutOptions"></chart>

非常感谢任何帮助！

Answer 1

在这里找到Chart.js Doughnut Chart Sizing，新的ChartJS标准是aspectRatio: 2，所以你需要在options对象上设置aspectRatio: 1。