Chart.js画布调整大小
在(Android WebView HTML5 canvas error)中，我发布了一个关于使用Graph.js库绘制图形的问题。现在的问题是，如果我多次调用该函数来绘制图形，画布每次都会调整大小。每次将图形重新绘制到同一画布时，其大小也会发生变化。我也尝试了设置画布的大小，但没有成功。
可能的原因是什么？为什么画布每次都会调整大小？
回答 14
Stack Overflow用户
发布于 2014-09-02 16:57:30
我遇到了很多问题，因为当鼠标悬停时，我的线条图形看起来很糟糕，我找到了一种更简单的方法，希望它能有所帮助:)
使用以下Chart.js选项：
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,Stack Overflow用户
发布于 2014-02-15 21:00:36
当Chart.js被调用时，它会将画布的大小放大一倍，然后尝试使用CSS缩小画布的大小，目的是为高dpi设备提供更高分辨率的图形。
问题是它没有意识到它已经做到了这一点，所以当连续调用时，它会再次将已经(两倍或更多)的大小乘以，直到事情开始崩溃。(实际发生的情况是，它正在检查是否应该通过更改宽度和高度的DOM属性来向画布添加更多像素，如果应该，则将其乘以某个因子，通常为2，然后更改该因子，然后更改css样式属性以保持页面上的大小不变。)
例如，当您运行一次并将画布宽度和高度设置为300时，它会将它们设置为600，然后将样式属性更改为300...但是如果您再次运行它，它会看到DOM的宽度和高度是600 (请检查这个问题的另一个答案以了解原因)，然后将其设置为1200，将css的宽度和高度设置为600。
这不是最优雅的解决方案，但我解决了这个问题，同时保持了视网膜设备的增强分辨率，只需在每次连续调用Chart.js之前手动设置画布的宽度和高度
var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);Stack Overflow用户
发布于 2016-08-30 19:27:03
这对我来说很有效：
<body>
<form>
[...]
<div style="position:absolute; top:60px; left:10px; width:500px; height:500px;">
<canvas id="cv_values"></canvas>
<script type="text/javascript">
var indicatedValueData = {
labels: ["1", "2", "3"],
datasets: [
{
[...]
};
var cv_values = document.getElementById("cv_values").getContext("2d");
var myChart = new Chart(cv_values, { type: "line", data: indicatedValueData });
</script>
</div>
</form>
</body>重要的事实是，我们必须在div-tag中设置画布的大小。
https://stackoverflow.com/questions/19847582
复制相似问题