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);

    ?>

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

我希望有人知道我的错误吗？

非常感谢

问候语的Björn

Answer 1

我的脚本简化了一些测试。但不幸的是我不知道，我提出这个必须设置补给。这个脚本一开始就加载了一次。

            <!-- jQuery 2.2.3 -->
            <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>

            <button id="ReLoadData">Daten erneut laden</button>
            <div id="IcecastGraph"></div>

            <script>

            $("#IcecastGraph").html("");

            $.ajax({
            url: "TEST_01.php",
            type: "POST",
            dataType: "json",
            success: function (data) {

              ShowGrpah(data);

            },

            });

            function ShowGrpah(data) {

            new Morris.Line({
                element: 'IcecastGraph',
                data: data,
                xkey: '2',
                ykeys: ['1'],
                labels: ['Hörer']
                });

            }

            </script>

Answer 2

使用redraw()

重绘字符

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

Answer 3

这些都没有实际更改图形值。

使用AJAX刷新Morris图表

3 个答案: