[英]I can not properly re scale <canvas> with width and height attributes
I'm using Charts.js
library and my <canvas>
element is acting strangely when i try to re scale it by changing it's width
and height
attributes 我正在使用Charts.js
库,当我尝试通过改变它的width
和height
属性来重新缩放它时,我的<canvas>
元素表现Charts.js
奇怪
I'm definitely missing something , keep in mind that i capture the whole window 我肯定错过了一些东西,请记住我占据了整个窗口
here are some examples: 这里有些例子:
Try it here , this is supposed to be a 10x10
square (pretty small right?) 在这里尝试 ,这应该是一个10x10
平方(非常小吗?)
var ctx = document.getElementById('myChart'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# 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: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <canvas id="myChart" width="10" height="10"></canvas>
Why can't i make it a 100x100
square? 为什么我不能把它变成100x100
平方? and not be placed in the whole browser?do i need a placeholder
for this? 而不是放在整个浏览器中?我需要一个placeholder
吗?
Here is the playground that makes a graph non-resizable as you might notice in the desktop
view although the mobile
view is perfect 这里是操场 ,使图形不可调整大小的,你可能会在注意到desktop
视图虽然mobile
的看法是完美的
Note: 注意:
When <div>
is not included and <canvas>
has not attributes
in browser it's huge , and on mobile resolution is perfect. 当<div>
不包含在内且<canvas>
在浏览器中没有attributes
,它是巨大的,并且在移动分辨率上是完美的。 If you apply width
and height
to <div>
which contains <canvas>
you can resize it but on mobile will be stretched. 如果将width
和height
应用于包含<canvas>
<div>
,则可以调整其大小,但在移动设备上将会拉伸。
Edit: added code snippet 编辑:添加了代码段
Edit2: added code playground Edit2:添加了代码游乐场
This is happening because you have "reponsive" activated by default. 发生这种情况是因为您默认激活了“reponsive”。 In this case , the attributes width and height will be ignored. 在这种情况下,属性width和height将被忽略。
The solution is to desactivate the responsive option like this : 解决方案是停用响应选项,如下所示:
options: {
responsive:false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
If you look at it through your console, you will notice that an extra element div.chartjs-size-monitor
is added to the DOM right before your target canvas. 如果您通过控制台查看它,您会注意到在目标画布之前的DOM中添加了一个额外的元素div.chartjs-size-monitor
。
This is done by ChartJS to ensure the canvas can be resized properly. 这是由ChartJS完成的,以确保可以正确调整画布大小。
To solve the it, you simply need to 要解决它,你只需要
Note that the parent element must be display: block
(ie, div
). 请注意,父元素必须是display: block
(即div
)。
ChartJS will change the width
and height
attribute of your canvas anyway, so there is no point setting it from your end. ChartJS无论如何都会改变画布的width
和height
属性,所以没有必要从你的结尾设置它。
var ctx = document.getElementById('myChart'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# 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: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); /* CODE BELOW ONLY EXIST TO IMITATE BROWSER SIZE */ const wrapper = document.querySelector('#window'); const desktop = document.querySelector('#desktop'); const mobile = document.querySelector('#mobile'); desktop.addEventListener('click', resize.bind(this, 'desktop')); mobile.addEventListener('click', resize.bind(this, 'mobile')); function resize(size, event){ event.preventDefault(); wrapper.classList.remove('desktop', 'mobile') wrapper.classList.add(size); }
/* CSS HERE ONLY EXIST TO IMITATE BROWSER SIZE */ #window { margin-top: 10px; border: 1px solid black; transition: all 0.3s; } #window.desktop { width: 450px; height: 253px; } #window.mobile { width: 320px; height: 568px; }
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <!-- Ignore these --> <button id="desktop">Desktop</button> <button id="mobile">Mobile</button> <!-- #window is to imitate browser window size --> <!-- imagine #container as the direct children of <body> --> <div id="window" class="desktop"> <!-- Moved all CSS to HTML as your requirement --> <div id="container" style="width: 100%; height: 100%; position: relative;"> <canvas id="myChart"></canvas> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.