Chart.js Canvas尺寸设置问题：画布无法调整大小

直接设置canvas元素的width和height属性后，Chart.js默认会启用响应式特性，自动覆盖这些值来适配布局。可以通过以下几种方式解决：

方法1：禁用响应式，保留canvas原生尺寸 #

在Chart的配置中添加responsive: false，让Chart.js不再修改canvas的宽高，完全遵循你设置的原生属性：

let ctx = document.createElement("canvas")
ctx.width = 200
ctx.height = 100
document.body.appendChild(ctx)

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["a", "b"],
        datasets: [{data: [1,2]},{data: [1,2]}],
    },
    options: {
        responsive: false // 禁用响应式，保留canvas原生尺寸
    }
})

方法2：用容器控制尺寸（推荐响应式场景） #

如果需要图表保持响应式，建议用容器元素包裹canvas，通过CSS设置容器的宽高，Chart.js会自动适配容器大小（默认responsive: true）：

// 创建容器和canvas
let container = document.createElement("div")
container.style.width = "200px"
container.style.height = "100px"

let ctx = document.createElement("canvas")
container.appendChild(ctx)
document.body.appendChild(container)

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["a", "b"],
        datasets: [{data: [1,2]},{data: [1,2]}],
    },
    options: {
        maintainAspectRatio: false // 取消默认宽高比限制，完全适配容器
    }
})

方法3：直接在Chart配置中指定尺寸 #

也可以在Chart的options里直接设置宽高，配合禁用响应式来生效：

let ctx = document.createElement("canvas")
document.body.appendChild(ctx)

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["a", "b"],
        datasets: [{data: [1,2]},{data: [1,2]}],
    },
    options: {
        responsive: false,
        width: 200,
        height: 100
    }
})

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