chart.js canvas 自定义大小

设置固定长宽可在外面套一层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,
    
}

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以通过以下步骤在Django项目中使用chart.js来绘制图表: 1. 在你的HTML文件中,首先确保你已经导入了chart.js文件。你可以使用`<script>`标签将其引入,如下所示: ```html <script src="/static/JS/chart/node_modules/chart.js/dist/chart.js"></script> ``` 请注意,这里的`/static/JS/chart/`路径应该根据你的项目目录结构进行相应的调整。 2. 接下来,你需要在HTML文件中创建一个用于显示图表的`<canvas>`元素。为了方便起见,给这个元素一个唯一的id,以便稍后在JavaScript代码中引用。例如: ```html <canvas id="myChart"></canvas> ``` 3. 在你的JavaScript文件中,使用以下代码来获取对`<canvas>`元素的引用,并通过Chart.js创建图表: ```javascript // 获取对canvas元素的引用 var ctx = document.getElementById('myChart').getContext('2d'); // 创建图表 var myChart = new Chart(ctx, { type: 'bar', // 设置图表类型,例如柱状图、折线图等 data: { labels: ['标签1', '标签2', '标签3'], // 图表的标签 datasets: [{ label: '数据集1', data: [10, 20, 30], // 数据集 backgroundColor: 'rgba(0, 123, 255, 0.5)', // 数据集的背景颜色 borderColor: 'rgba(0, 123, 255, 1)', // 数据集的边框颜色 borderWidth: 1 // 边框宽度 }] }, options: { // 设置图表的其他配置选项,例如标题、坐标轴等 } }); ``` 这是一个简单的示例,使用了柱状图类型和一个数据集。你可以根据需要自定义图表的类型、数据和其他选项。 确保你已经在正确的位置引入了chart.js文件并按照以上步骤进行操作,即可在HTML中使用chart.js绘制图表。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值