() chart.js怎么图表设置实际大小

<!DOCTYPE html>
<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title></title> <script src="../js/Chart-1.0.1-beta.4.js"></script> <script> var data = { labels: ["MON", "TUS", "WED", "THU", "FRI", "SAT","SUN"], datasets: [{

// lineItemName: “test1”,

 fillColor: rgba238,90,133,0.7, strokeColor: "rgb238,90,133", pointColor: "#5b5956", pointStrokeColor: "#a54d65", data: [50, 38, 20, 40, 58, 50 ,40] }, ] };
 var chartLine = null; window.onload = function { var ctx = document.getElementById"myChart".getContext"2d"; chartLine = new Chartctx.Linedata, { scaleOverride: true, //是否用硬编码重写y轴网格线 scaleSteps: 3, //y轴刻度的个数 scaleStepWidth: 20, //y轴每个刻度的宽度 scaleStartValue: 0, //y轴的起始值 pointDot: true, //是否显示点 pointDotRadius: 3, //点的半径 pointDotStrokeWidth: 2, //点的线宽 datasetStrokeWidth: 1, //数据线的线宽 animation: true, //是否有动画效果 animationSteps: 60 ,//动画的步数 scaleLineWidth : 1, // Y/X轴的颜色 scaleLineColor : #686665, scaleGridLineColor : "#686665", scaleFontSize : 12, scaleFontColor : "#fff", }; } </script>
</head>
<body> <canvas id="myChart" width="400" height="200" ></canvas> </body> </script>

</html>

=================================================================

问题就是,加了viewport那行,图表就不缩放了,始终是固定大小,不加那行,就是自适应大小。这怎么搞?也没有对canvas实际内容设置大小的地方。给myChart动态设置宽高也根本不管用,求解求解!

“user-scalable=no”这表示禁止用户缩放,如果改成“user-scalable=yes”就是同意用户缩放,和你的需求其实并没有冲突吧(只是对用户拉伸放大或缩小做了规定)。话说,我还是不明白题主你到底是要它自适应还是要他固定宽高?https://www.zhihu.com/questio…这是知乎上canvas自适应宽高的讨论,希望能帮到你

我理解你的意思是想把图表显示得比显示区域大,然后超出的部分通过拖动来查看?

我对这个工具本身没啥研究,不过有一个解决方案可以尝试一下。

用两层 DIV 作为容易,第一层限定大小,就是显示大小,设置 overflow: auto
第二层按你期望的图表大小设置大小,并在这上面画图。

发表评论

电子邮件地址不会被公开。 必填项已用*标注