Javascript 用AJAX刷新Morris图表

首先，我想为我的英语不好道歉。虽然我懂英语，但能用书面表达自己，不幸的是，非常糟糕。所以我使用翻译工具

现在我来回答我的问题：

很高兴我能用一个按钮更新我的Morris.js图表。我已经做了几个小时的实验。在此之前，我将向您展示我的代码：

data_statistik.php

Icecast统计
统计数据刷新
var图=莫里斯线({
元素：“IcecastGraph”，
数据：，
xkey:'侦听器\u时间戳'，
ykeys:['listener_count']，
标签：['Hörer']
});
$（文档）.ready（函数（）{
$（“#重新加载数据”）。单击（函数（）{
$.ajax({
url:“pages/management/data\u statistik\u content.php”，
类型：“POST”，
数据类型：“json”，
成功：功能（数据）{
var data=JSON.stringify（数据）；
图.setData（数据）；
},
});
});
});

data_statistik_content.php

下面的图表显示了它。数据的更新不起作用。为什么?

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

多谢各位

问候语

---

Björn

使用

Redraw（）

---

使用

Redraw（）

---

为了测试，我对脚本做了一些简化。但不幸的是，我不知道，我提出这一点必须充电。此脚本在开始时加载所有内容一次

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

拉丹
$（“#IcecastGraph”）.html（“”）；
$.ajax({
url:“TEST_01.php”，
类型：“POST”，
数据类型：“json”，
成功：功能（数据）{
ShowGrpah（数据）；
},
});
函数ShowGrpah（数据）{
新莫里斯线({
元素：“IcecastGraph”，
数据：数据，
xkey:'2'，
ykeys:[1']，
标签：['Hörer']
});
}

为了测试，我对脚本做了一些简化。但不幸的是，我不知道，我提出这一点必须充电。此脚本在开始时加载所有内容一次

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

拉丹
$（“#IcecastGraph”）.html（“”）；
$.ajax({
url:“TEST_01.php”，
类型：“POST”，
数据类型：“json”，
成功：功能（数据）{
ShowGrpah（数据）；
},
});
函数ShowGrpah（数据）{
新莫里斯线({
元素：“IcecastGraph”，
数据：数据，
xkey:'2'，
ykeys:[1']，
标签：['Hörer']
});
}

这些都不会改变图形的值

这些都不会改变图形的值

正确答案和最简单的解决方案。我的仪表板上有选项卡视图，第二页的morris.js油炸圈饼图表加载不正确。但在使用redraw函数后，它确实起作用。唯一需要关心的是，我必须将图形结果存储在变量中，才能从jQuery DOM元素调用redraw（）方法，因为这是不可能的。希望我没有错过任何其他可能的重画方法，除了上面：（谢谢。正确的答案和最简单的解决方案。我的仪表板上有tab视图，第二页上的morris.js甜甜圈图表没有正确加载。但在使用重画函数后它确实起作用。唯一的问题是我必须将图形结果存储在变量中才能调用重画（）方法作为jQuery DOM元素，它无法完成。希望我没有错过任何其他可能的重画方法，除了上面：（谢谢。

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

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