Javascript 我无法正确地重新缩放<；帆布>；具有宽度和高度属性

我正在使用

Charts.js

库，当我试图通过更改

宽度

和

高度

属性来重新缩放它时，我的

元素的行为异常

我肯定错过了什么，请记住，我捕获了整个窗口

以下是一些例子：

• 宽度=400，高度=100

• width=“100”height=“100”

• width=“10”height=“20”

• width=“400”height=“50”

在这里试一试，这应该是一个

10x10

正方形（很小吧？）

var ctx=document.getElementById（'myChart'）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,5,2,3]，
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
‘rgba（255、159、64、0.2）’
],
边框颜色：[
"rgba(255,99,132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
‘rgba（255、159、64、1）’
],
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
发生这种情况是因为默认情况下已激活“Responsive”。在这种情况下，将忽略属性“宽度”和“高度”

解决方案是按如下方式取消激活响应选项：

 options: {
    responsive:false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

如果您通过控制台查看它，您会注意到在目标画布的正前方向DOM添加了一个额外的元素
div.chartjs-size-monitor

这是为了确保画布可以正确调整大小

要解决这个问题，您只需要

将画布移动到容器元素中
在容器元素处设置大小
请注意，父元素必须是
display:block
（即
div
）

ChartJS将更改画布的
宽度
和
高度
属性，因此从一端设置它没有意义


var ctx=document.getElementById（'myChart'）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,5,2,3]，
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
‘rgba（255、159、64、0.2）’
],
边框颜色：[
"rgba(255,99,132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
‘rgba（255、159、64、1）’
],
边框宽度：1
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
/*下面的代码仅用于模拟浏览器大小*/
const wrapper=document.querySelector（“#window”）；
const desktop=document.querySelector（“#desktop”）；
const mobile=document.querySelector（“#mobile”）；
desktop.addEventListener（'click'，resize.bind（这个，'desktop'））；
mobile.addEventListener（'click'，resize.bind（这个'mobile'））；
函数调整大小（大小、事件）{
event.preventDefault（）；
wrapper.classList.remove（'desktop'，'mobile'）
wrapper.classList.add（大小）；
}
/*此处的CSS仅用于模拟浏览器大小*/
#窗口{
边缘顶部：10px；
边框：1px纯黑；
过渡：均为0.3秒；
}
#windows.desktop{
宽度：450px；
高度：253px；
}
#window.mobile{
宽度：320px；
高度：568px；
}

桌面
可移动的
的确如此，但是否有其他方法可以同时保持响应性和小型化？我还有另一个解决方案，您可以将画布封装在一个div中，然后在您的选项中添加此响应性：true，MaintaintAspectratio:false。我的解决方案是使用“%”保持响应，同时控制宽度和高度是的，这正是我要寻找的，但在div中，属性
width
an
height
的行为与预期不同，这个
不应该给我一个
高度大于
宽度的图表吗？事实上，它不是这样的，它的工作方式正好相反，例如：
和
给我相同的
输出
当我编译它并在本地主机上运行它时，它不起作用
应该与您的
css
相同，对吗？从
中删除
宽度
和
高度
属性响应迅速，我可以使其变小变大，但根据
宽度
或
高度
，正方形仍然是
x*x
。chart.js
library生成自动图形，这就是为什么我不使用自定义css的原因