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

Question

我正在尝试在用户单击按钮时显示图表图表。但是当我这样做时，我遇到了一个问题，如果我正常显示图形，那么它会正确显示，但是如果我放置 ajax show() ，所有图形都会缩小，如下图所示.

没有点击按钮

点击按钮显示图形

Demo.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, 2, 0]
                    ]
                };
                new Chartist.Bar('.ct-chart', data);

                $(document).ready(function () {
                    $('#Demo').on('click', function () {
                        $('#DGraph').show()
                    })
                })
            </script>
        </main>
    </div>
</body>
</html>

我的代码有什么问题请帮助我。

Answer 1

只需将图表初始化移动到内部点击

$(document).ready(function() {
  $('#Demo').on('click', function() {
    $('#DGraph').show()
    new Chartist.Bar('.ct-chart', data);
  })
})

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

Getting problem in displaying chartist graph in html in button is clicked

html

javascript

ajax

chartist.js

bootstrap-4