javascript - 使用 AJAX 刷新莫里斯图

Question

作为第一个，我想为我糟糕的英语道歉。虽然我懂英语，​​但能用书面表达自己的意思，不幸的是，很差。所以我使用翻译工具。

现在我来回答我的问题:

我很乐意用按钮更新 Morris.js 显示的图表。我已经进行了几个小时的实验。到目前为止，我向您展示了我的代码:

data_statistik.php

    <div id="data_statistik" class="col-md-12">

      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Icecast Statistik</h3>
          <button id="ReLoadData" type="button" class="btn btn-primary">Statistik refresh</button>
        </div>
        <!-- /.box-header -->
        <div class="box-body">

          <div class="row">

            <div class="col-md-12">

              <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
              <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
              <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
              <script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

              <div id="IcecastGraph"></div>

              <?php

              $sth = $pdo->prepare("SELECT * FROM statistik");
              $sth->execute();
              $result = $sth->fetchAll();

              ?>

              <script>

                var graph = Morris.Line({
                            element: 'IcecastGraph',
                            data: <?php echo json_encode($result); ?>,
                            xkey: 'listener_timestamp',
                            ykeys: ['listener_count'],
                            labels: ['Hörer']
                            });

                $(document).ready(function(){

                  $( "#ReLoadData" ).click(function() {

                    $.ajax({
                    url: "pages/management/data_statistik_content.php",
                    type: "POST",
                    dataType: "json",
                    success: function (data) {

                      var data = JSON.stringify(data);

                      graph.setData(data);

                    },

                    });

                  });

                });

              </script>

            </div>  
          </div>

        </div>
      </div>

    </div>

data_statistik_content.php

    <?php

    session_start();

    include("../../inc/config.inc.php");
    include("../../inc/functions.inc.php");

    $user = check_user();

    $sth = $pdo->prepare("SELECT * FROM statistik");
    $sth->execute();
    $result = $sth->fetchAll();

    header('Content-Type: application/json');

    echo json_encode($result);

    ?>

所显示的图表。数据更新不起作用。为什么？

我希望这里有人知道我的错误？

非常感谢

问候语比约恩

Answer 1

使用redraw()重绘字符

graph.setData(data);
graph.redraw();