Jak*_*aka 79 html5 canvas chart.js
在(Android WebView HTML5画布错误)中,我发布了一个关于使用Graph.js库绘制图形的问题.我现在的问题是,如果我调用函数多次绘制图形,画布每次调整大小.每次将图形重绘为同一画布时,其大小也会发生变化.我也尝试设置画布的大小但没有成功.
可能是什么原因？为什么画布每次调整大小？
小智 164
我遇到了很多问题,因为在鼠标悬停之后,我的线条图看起来很糟糕,我找到了一种更简单的方法,希望它会有所帮助:)
使用这些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,
jcm*_*r11 61
发生的事情是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);
Pat*_*zer 24
这对我有用:
<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中设置画布的大小.
Pra*_*kar 18
在IOS和Android中,浏览器会在您滚动时隐藏工具栏,从而更改窗口的大小,该窗口会导致图表调整大小.解决方案是保持纵横比.
var options = {
responsive: true,
maintainAspectRatio: true
}
这应该可以解决您的问题.
正如jcmiller11建议的那样,设置宽度和高度会有所帮助.一个稍微好一点的解决方案是在绘制图表之前检索画布的宽度和高度.然后使用这些数字在每次后续重新绘制图表时设置图表.这可以确保javascript代码中没有常量.
ctx.canvas.originalwidth = ctx.canvas.width;
ctx.canvas.originalheight = ctx.canvas.height;
function drawchart() {
ctx.canvas.width = ctx.canvas.originalwidth;
ctx.canvas.height = ctx.canvas.originalheight;
var chartctx = new Chart(ctx);
myNewBarChart = chartctx.Bar(data, chartSettings);
}
在这里，我不得不结合使用多个答案和一些小调整。
首先，有必要将canvas元素包装在块级容器中。我对你说，千万不能让canvas元素有兄弟姐妹; 让它成为一个孤独的孩子，因为它固执而被宠坏了。（包装纸可能不需要对其施加任何尺寸限制，但是为了安全起见，最好对其施加最大高度。）
确保满足先前条件后，在启动图表时，请确保使用以下选项：
var options = {
"responsive": true,
"maintainAspectRatio": false
}
如果要调整图表的高度，请在画布元素级别进行调整。
<canvas height="500"></canvas>
不要试图以任何其他方式对待孩子。这将产生令人满意的，正确布局的图表，该图表可以和平地停留在其婴儿床中。