如何使用Chart.js实现页面中doughnut环形图表居中显示

你当前代码不生效是两个核心问题导致的：

• 配置冗余冲突：初始化Chart时传入的配置对象里写了两个同名的options字段，前一个自定义的option变量会被后一个完全覆盖；而且你在options里加的scales.yAxes配置是给柱状图、折线图这类直角坐标系图表用的，环形图属于径向图表，不需要这个配置，多余配置反而会干扰默认布局逻辑。
• CSS布局不全：你给容器写的flex布局只配置了水平居中，没加垂直居中规则，也没给canvas节点加尺寸约束，响应式模式下canvas容易出现偏移。

1. 调整CSS样式 #

补全flex布局的居中规则，同时给canvas加尺寸限制，避免溢出偏移：

/* 清除浏览器默认边距，避免布局偏移 */
body {
    margin: 0;
    padding: 0;
}
.chart-container {
    display: flex;
    justify-content: center; /* 水平方向居中 */
    align-items: center; /* 垂直方向居中 */
    /* 按需调整容器尺寸，这里示例让容器占满视口，实现全页面居中 */
    width: 100vw;
    height: 100vh;
    position: relative;
}
#myChart {
    max-width: 20vw; /* 和你之前写的容器宽度匹配 */
    max-height: 30vw; /* 和你之前写的容器高度匹配 */
}

2. 清理JS冗余配置 #

删掉重复的options定义、删掉环形图不需要的scales配置，保留必要参数即可：

<!-- 保留原有的canvas容器和CDN引入，JS部分替换为如下内容 -->
<script>
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: "Number of votes",
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true // 强制保持图表宽高比，避免拉伸偏移
        }
    });
</script>

你之前定义的var option = {responsive: true}属于完全没用到的冗余代码，直接删掉即可。

• 不需要手动修改options里的X、Y偏移值，Chart.js默认就会让环形图在绑定的canvas节点内部完全居中，你只需要保证canvas节点本身在页面的位置是居中的即可。
• 如果你不需要图表在整个页面居中，只需要在父容器内居中，可以删掉CSS里给.chart-container加的width:100vw、height:100vh规则，保留flex的两个居中属性即可。

内容的提问来源于stack exchange，提问作者RTM