小编Jun*_*Kim的帖子

Chart.js 中的宽度和高度

我正在使用 Chart.js,发现它style以不同的方式识别以下两个 s\xe2\x80\x94<canvas style="">效果很好,但<style>canvas{}扭曲了图表。这是两个例子。

\n\n
<!doctype html>\n<html>\n\n<canvas id=Figure1 style="width:640px;height:480px"></canvas>\n\n<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js></script>\n<script>\nnew Chart(document.getElementById("Figure1"),{type:"scatter",data:{datasets:[{data:[{x:1,y:1},{x:2,y:2},{x:3,y:3}]}]},options:{responsive:false}});\n</script>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n\n

此代码不会扭曲图像,因此我想使用下面的代码全局应用设置。

\n\n
<!doctype html>\n<html>\n\n<style>canvas{width:640px;height:480px}</style>\n\n<canvas id=Figure1></canvas>\n<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js></script>\n<script>\nnew Chart(document.getElementById("Figure1"),{type:"scatter",data:{datasets:[{data:[{x:1,y:1},{x:2,y:2},{x:3,y:3}]}]},options:{responsive:false}});\n</script>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n\n

我刚刚width:640px;height:480px在这段代码中重新定位,但它奇怪地拉伸了图像。我必须始终使用<canvas style="">来调整 Chart.js 图像的大小吗?

\n

javascript css chart.js

5
推荐指数
1
解决办法
2万
查看次数

标签 统计

chart.js ×1

css ×1

javascript ×1