保持chart.js甜甜圈的固定宽度和高度以容器为中心

Question

我正在使用图表js的aurelia插件，并有一个动态的甜甜圈图表。我已经为图表设置了对false的响应，因为我希望它在所有屏幕/设备大小中保持固定的宽度和高度。但是，由于canvas元素溢出其容器，因此无法使图表保持居中。如果我在画布元素上设置了最大宽度...它会使图表保持居中，但会通过压扁它来完全扭曲甜甜圈。见图：

以下是大屏幕尺寸的图表，正确呈现：

当我减少视口时，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，因此您需要在aspectRatio: 1对象上设置options。