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: 'rgba(238,90,133,0.7)',
strokeColor: "rgb(238,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 Chart(ctx).Line(data, {
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动态设置宽高也根本不管用，求解求解！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
“user-scalable=no”这表示禁止用户缩放，如果改成“user-scalable=yes”就是同意用户缩放，和你的需求其实并没有冲突吧（只是对用户拉伸放大或缩小做了规定）。话说，我还是不明白题主你到底是要它自适应还是要他固定宽高?https://www.zhihu.com/questio...这是知乎上canvas自适应宽高的讨论，希望能帮到你
我理解你的意思是想把图表显示得比显示区域大，然后超出的部分通过拖动来查看？
我对这个工具本身没啥研究，不过有一个解决方案可以尝试一下。
用两层 DIV 作为容易，第一层限定大小，就是显示大小，设置
overflow: auto。第二层按你期望的图表大小设置大小，并在这上面画图。