javascript - 保持 chart.js donut 固定宽度和高度在容器中居中

Question

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

这是大屏幕尺寸的图表，正确呈现:

当我减小视口(viewport)时，canvas 元素溢出了它的容器，使图表保持在“canvas”元素的中心，但它溢出了它的容器，所以它没有居中，它应该是这样的:

如果我在 Canvas 上设置最大宽度，它会使图表居中但会严重扭曲 donut :

我无法为 chart.js donut 使用响应选项，因为这会导致它在某些屏幕尺寸下变得太小。我怎样才能保持这个固定的宽度和高度，同时保持图表正确居中。这是我的 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。