Javascript Chart.js中的宽度和高度_Javascript_Css_Chart.js

Javascript Chart.js中的宽度和高度

javascript css chart.js

Javascript Chart.js中的宽度和高度,javascript,css,chart.js,Javascript,Css,Chart.js,我在使用Chart.js时发现，它对以下两种样式的识别不同-效果很好，而canvas{}会扭曲图表。这里有两个例子 <!doctype html> <html> <canvas id=Figure1 style="width:640px;height:480px"></canvas> <script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js

我在使用Chart.js时发现，它对以下两种

样式的识别不同-
效果很好，而canvas{}
会扭曲图表。这里有两个例子
<!doctype html>
<html>

<canvas id=Figure1 style="width:640px;height:480px"></canvas>

<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js></script>
<script>
new Chart(document.getElementById("Figure1"),{type:"scatter",data:{datasets:[{data:[{x:1,y:1},{x:2,y:2},{x:3,y:3}]}]},options:{responsive:false}});
</script>
</html>


新图表（document.getElementById（“Figure1”），{type:“scatter”，数据：{dataset:[{data:[{x:1，y:1}，{x:2，y:2}，{x:3，y:3}]}，选项：{responsive:false}）；

这段代码不会扭曲图像，所以我想用下面的代码全局应用设置
<!doctype html>
<html>

<style>canvas{width:640px;height:480px}</style>

<canvas id=Figure1></canvas>
<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js></script>
<script>
new Chart(document.getElementById("Figure1"),{type:"scatter",data:{datasets:[{data:[{x:1,y:1},{x:2,y:2},{x:3,y:3}]}]},options:{responsive:false}});
</script>
</html>


画布{宽度：640px；高度：480px}
新图表（document.getElementById（“Figure1”），{type:“scatter”，数据：{dataset:[{data:[{x:1，y:1}，{x:2，y:2}，{x:3，y:3}]}，选项：{responsive:false}）；

我刚刚重新定位了宽度：640px；高度：480px
在该代码中，但它会奇怪地拉伸图像。我必须始终使用
调整Chart.js图像的大小吗？有许多方法可以指定画布的高度和宽度。但是你试过的两种方法有什么不同？嗯，完整的解释可以在这里找到

另外，你可以通过设置responsive:true并将画布放入div中，使图表具有响应性。这样，画布将始终采用其容器的尺寸

let line_chart=document.getElementById（“折线图”）；
新图表（折线图{
键入：“散布”，
数据：{
数据集：[{
标签：“样本数据”，
数据：[{x:1，y:1}，{x:2，y:2}，{x:3，y:3}]}，
},
选项：{
回答：是的，
}
});
/*如果更改包装的高度和宽度，图表将跟随包装的尺寸*/
.包装纸{
高度：200px；
宽度：300px；
}