在(Android WebView HTML5 canvas error)中,我发布了一个关于使用Graph.js库绘制图形的问题。现在的问题是,如果我多次调用该函数来绘制图形,画布每次都会调整大小。每次将图形重新绘制到同一画布时,其大小也会发生变化。我也尝试了设置画布的大小,但没有成功。
可能的原因是什么?为什么画布每次都会调整大小?
发布于 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,
发布于 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);
发布于 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
复制相似问题