chart.js - 通过PHP、MySQL通过ajax调用更新图表数据

Question

我的图表数据是通过ajax从MySQL数据库调用的，当数据库中的数据更新时图表不会更新。

图表正确呈现，只是没有更新。

我是 PHP 和 Chartjs 新手。任何帮助都会很棒

无论我尝试什么，我都无法让 .update 或 .destroy 工作。

我上次尝试添加一个按钮来刷新点击数据也失败了。

我的代码: HTML:

<div id="chart-container">
    <canvas id="mycanvas"></canvas>
    <div class="toolbar">
        <button onclick="data">Refresh</button>

    </div>
</div>

<!-- javascript -->
<script type="text/javascript"
        src="modules/dashboards/js/jquery.min.js">
</script>
<script type="text/javascript"
        src="modules/dashboards/js/Chart.min.js">
</script>
<script type="text/javascript" src="modules/dashboards/js/app.js">
</script>

JS:

$(document).ready(function () {
    $.ajax({
               url: "http://localhost/mycharts/api/data.php",
               method: "GET",

               success: function (data) {
                   console.log(data);
                   var subholding = [];
                   var TotalAccounts = [];

                   for (var i in data) {
                       subholding.push("" + data[i].subholding);
                       TotalAccounts.push(data[i].TotalAccounts);
                   }

                   var chartdata = {
                       labels: subholding,
                       datasets: [
                           {
                               label: 'Total Accounts',
                               backgroundColor: [
                                   "red",
                                   "green",
                                   "blue",
                                   "purple",
                                   "magenta",
                                   "yellow",
                                   "orange",
                                   "black"
                               ],
                               borderColor: 'rgba(200, 200, 200, 0.75)',
                               hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                               hoverBorderColor: 'rgba(200, 200, 200, 1)',
                               data: TotalAccounts
                           }

                       ]
                   };

                   var ctx = $("#mycanvas");
                   var barGraph = new Chart(ctx, {
                       type: 'bar',
                       data: chartdata
                   });

                   function barGraph() {
                       subholding.push("" + data[i].subholding);
                       TotalAccounts.push(data[i].TotalAccounts);

                       data.update();
                   }
               },
               error: function (data) {
                   console.log(data);
               }
           });
});

预期结果:当数据库中的数据更新时，图表自动更新或刷新/打开页面时

Answer 1

你可以尝试将你的ajax代码放入setInterval函数中

     setInterval(function(){ 

     //Here

      }, 3000);

编辑:我的意思是 setInterval