Javascript 为什么chart.js折线图相互重叠？

我在StackOverflow上看到过类似的问题，但到目前为止，没有一个答案对我有帮助

我在我的web项目中使用了chart.js，但是现在，当我想在同一个容器中显示两个线条图时，它们会做一些奇怪的事情，即使我调整父容器或尝试用div包装画布

下面是一些代码：

[…]
恩特拉达斯：30
杜拉西翁：0:02
[...]

函数绘图图（画布、数据标签、数据、标签）{
窗口[datasetLabel]=新图表(
document.getElementById（画布），
{
键入：“行”，
数据：{
数据集：[
{
线张力：0.1，
标签：datasetLabel，
填充：是的，
数据：数据
}
],
标签：标签
},
选项：{
比例：{
xAxes：[{
显示：真
}]
}
}
}
);
}
//向api询问数据数组
window.onload=函数（）{
让droneId=document.getElementsByClassName（“卡”）[0].id；
get（`/api/vuelos/data/${droneId}`）
。然后（（响应）=>{
responseData=response.data；
让factorized=refractor（response.data）；//将数据从无人机分离到数组中
绘图图（“tempGraph”、“temperatura”、factorized.temp、factorized.labels）；
绘图图（“ppmGraph”、“Speculas por millon”、factorized.ppm、factorized.labels）；
})
.catch（（错误）=>{
警报（错误消息）；
console.log（错误）；
});
}

.Card{
position:relative；/*这样我就可以重新定位里面的选项了*/
背景：var（--背景）；
填充：30px；
边界半径：15px；
利润率：10px；
框阴影：var（--ui-shawdow）；
}
.填充{
宽度：100%；
身高：100%；
}
.Card>.Details{
填充：10px；
显示器：flex；
弯曲方向：立柱；
对齐内容：周围的空间；
}
.ChartContainer{
显示器：flex；
弯曲方向：立柱；
对齐内容：之间的空间；
身高：50%；
}
沙特勒先生{
身高：40%；
宽度：100%；
}
帆布{
身高：40%；
}

我可能做错了什么？我曾尝试在CSS或Html中更改内容，但似乎不起作用

我希望它看起来像这样，没有溢出的卡响应。

---

你认为你可以用狙击手或扑救机来完成吗？为了更好地了解情况working@SoulEeater这是测试环境，我想你的问题是CSS，只需删除.ChartContainer中的

高度：50%

，你的整个屏幕也有问题，我无法在我的笔记本电脑中全部显示，我想它需要一些滚动条。。