欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

chart.js canvas 自定义大小

程序员文章站 2022-07-13 15:51:22
...

设置固定长宽可在外面套一层div 

<div style="height:30vh;width:100vw;">
    <canvas id="demo"></canvas>
</div>

并在js中添加一下配置,否则会默认设置长宽1比2

options: {
    // 当其容器工作时调整图表画布的大小
    responsive: true,
    // (width / height)调整大小时,不保持原始画布的宽高比
    maintainAspectRatio: false,
    // 其他参数
    // 调整大小事件后,动画化为新大小所需的持续时间(以毫秒为单位)。
    // responsiveAnimationDuration: 0,
    // 画布纵横比(即width / height,值为1代表方形画布)。请注意,如果将高度明确定义为属性或通过样式定义,则将忽略此选项。
    // aspectRatio: 2,
    
}

 

相关标签: chart js