大佬教程收集整理的这篇文章主要介绍了单击按钮中在 html 中显示图表图表时出现问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
如果用户单击按钮，我将尝试显示图表图表。但是当我这样做时，我面临的问题是，如果我正常显示图形，那么它会正确显示，但是如果我放置 AJAX show() ，所有图形都会缩小，如下图所示。
没有点击按钮
点击按钮显示图形
演示.HTML
<!DOCTYPE HTML>
<HTML lang="en" class="h-100">
<head>
<Meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.Jsdelivr.net/npm/bootstrap-icons@1.4.0/Font/bootstrap-icons.CSS">
<link rel="stylesheet" href="https://cdn.Jsdelivr.net/npm/bootstrap@4.6.0/dist/CSS/bootstrap.min.CSS">
<script src="https://cdn.Jsdelivr.net/npm/bootstrap@4.6.0/dist/Js/bootstrap.bundle.min.Js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.Js"></script>
<script src="https://cdn.Jsdelivr.net/npm/popper.Js@1.16.1/dist/umd/popper.min.Js"></script>
<script src="https://cdn.Jsdelivr.net/npm/bootstrap@4.6.0/dist/Js/bootstrap.min.Js"></script>
<link rel="stylesheet" href="//cdn.Jsdelivr.net/chartist.Js/latest/chartist.min.CSS">
<script src="//cdn.Jsdelivr.net/chartist.Js/latest/chartist.min.Js"></script>
<link rel="stylesheet" type="text/CSS" href="{{ url_for('static',filename='Csspage/StyleSheet.CSS') }}">
<script type="application/JavaScript" src="{{ url_for('static',filename='JsPage/JavaScript.Js') }}"></script>
<title>Demo</title>
</head>
<body class="d-flex h-100 text-center text-white user-SELEct-none bg-white">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<main style="padding-top: 130px;">
<button class="btn btn-warning btn-sm" ID="Demo">Graph</button><br><br>
<div class="ct-chart ct-perfect-fourth mx-auto my-auto w-75 h-50 border" ID="DGraph" style="display: none"></div>
<script>
var data = {
labels: ['Mon','Tue','Wed','Thu','Fri'],serIEs: [
[5,2,4,0]
]
};
new Chartist.bar('.ct-chart',data);
$(document).ready(function () {
$('#Demo').on('click',function () {
$('#DGraph').show()
})
})
</script>
</main>
</div>
</body>
</HTML>
我的代码有什么问题请帮助我。
只需将图表初始化移动到内部点击
$(document).ready(function() {
$('#Demo').on('click',function() {
$('#DGraph').show()
new Chartist.bar('.ct-chart',data);
})
})
以上是大佬教程为你收集整理的单击按钮中在 html 中显示图表图表时出现问题全部内容，希望文章能够帮你解决单击按钮中在 html 中显示图表图表时出现问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。