单击按钮中在 html 中显示图表图表时出现问题

如何解决单击按钮中在 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);
  })
})