Morris JS 图表不会显示 [关闭]-解网

问：

编辑问题以包括所需的行为、特定问题或错误以及重现问题所需的最短代码。这将帮助其他人回答这个问题。

6天前关闭。

改进此问题

我在网页上有一个图表，该图表将不再显示。MySQL查询正常，并在回显时显示正确的数据。我不知道为什么它不起作用。它不会显示任何错误，但它不会画线。

附言具有不同 MySQL 查询的同一图表在另一个网页上正确显示。

脚本如下：

    <head>
    <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css" />
    
    <link rel="stylesheet" href="../assets/vendor/chartist/css/chartist.min.css" />
    <link rel="stylesheet" href="../assets/vendor/chartist-plugin-tooltip/chartist-plugin-tooltip.css">

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
    </head>

                  <div class="body">
                            <div id="water_graph"></div>
                            <script>
                            $(document).ready(function () {
                            new Morris.Area({
                             element : 'water_graph',
                             data:[{
                             period: '2023-11-15 18:12:11',
                              water_level: 43

                             }, {
                            period: '2023-11-15 19:12:11',
                            water_level: 40

                            }, {
                            period: '2023-11-16 03:12:11',
                            water_level: 43

                            }, {
                           period: '2023-11-16 07:12:11',
                           water_level: 40
                            }],
                             xkey:'period',
                             ykeys:['water_level'],
                             labels:['water level'],
                             hideHover:'auto',
                              pointSize: 3,
                             fillOpacity: 0,
                             pointStrokeColors: ['#2cbfb7', '#f7750a', '#c0d0d6'],
                             behaveLikeLine: true,
                             gridLineColor: '#eeeeee',
                             lineWidth: 2,
                             lineColors: ['#2cbfb7', '#f7750a', '#c0d0d6'],
                             resize: true,
                              gridIntegers: true,
                             goals: [10,50],
                             //goalLabels: ['50', '10'],
                             goalTextSize: 5,
                             goalStrokeWidth: 1,
                             goalLineColors: ["red", "green"],
                             ymax: 100,
                             ymin: 0,
                             postUnits: '%',
                             gridTextSize: 'auto'

                            });
                            });
                            </script>
                            <ul class="ct-legend"><li class="ct-series-0" data-legend="0">Water Level</li>
                        
                        </div>
                    </div>

<script src="assets/bundles/libscripts.bundle.js"></script>    
<script src="assets/bundles/vendorscripts.bundle.js"></script>

<script src="assets/bundles/chartist.bundle.js"></script>

<script src="assets/bundles/mainscripts.bundle.js"></script>
<script src="assets/js/pages/tables/jquery-datatable.js"></script>
<script src="assets/js/index.js"></script>
<script src="assets/js/pages/charts/sparklinegraph.js"></script>
<script src="assets/bundles/morrisscripts.bundle.js"></script> <!-- Morris Plugin Js --> 

<script src="assets/js/pages/charts/morris.js"></script>

JavaScript jquery morris.js

Morris JS 图表不会显示 [关闭]

Morris JS Chart won't display [closed]

评论