Chart.js 中的宽度和高度
[英]Width and Height in Chart.js
问题描述
我在使用 Chart.js 时发现它对以下两种style的识别style不同—— <canvas style="">效果很好，而<style>canvas{}扭曲了图表。 这里有两个例子。
<!doctype html>
<html>
<canvas id=Figure1 style="width:640px;height:480px"></canvas>
<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js></script>
<script>
new Chart(document.getElementById("Figure1"),{type:"scatter",data:{datasets:[{data:[{x:1,y:1},{x:2,y:2},{x:3,y:3}]}]},options:{responsive:false}});
</script>
</html>
此代码不会扭曲图像，因此我想使用以下代码全局应用设置。
<!doctype html>
<html>
<style>canvas{width:640px;height:480px}</style>
<canvas id=Figure1></canvas>
<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js></script>
<script>
new Chart(document.getElementById("Figure1"),{type:"scatter",data:{datasets:[{data:[{x:1,y:1},{x:2,y:2},{x:3,y:3}]}]},options:{responsive:false}});
</script>
</html>
我只是在这段代码中重新定位了width:640px;height:480px ，但它奇怪地拉伸了图像。 我必须总是使用<canvas style="">来调整 Chart.js 图像的大小吗？
1 个解决方案
解决方案1
1 已采纳 2019-02-22 19:35:44
有很多方法可以指定画布的高度和宽度。 但是您尝试的两种方法有什么区别？ 好吧，完整的解释可以在这里找到Canvas 在使用 CSS 时被拉伸，但使用“宽度”/“高度”属性是正常的
PS 您可以通过响应式使图表具有响应性：true 并将您的画布放在 div 中。 这样，画布将始终采用其容器的尺寸。
let line_chart = document.getElementById("line-chart"); new Chart(line_chart, { type: 'scatter', data: { datasets: [{ label: 'Sample Data', data: [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 }] }], }, options: { responsive:true, } });
/* If you change the wrapper's height and width, the chart will follow the wrapper's dimensions */ .wrapper{ height: 200px; width: 300px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script> <div class="wrapper"> <canvas id="line-chart"></canvas> </div>
Chart.js忽略画布高度和宽度
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.