Question

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

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

我是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

Answer 2

然后尝试：

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

   setInterval(function(){ 

 $(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);
           }
       });
   });

  }, 30000);

Answer 3

去年我创建了类似的方法。这是我的简化方法：

使用所有选项初始化图表
调用Chartrefresh函数
使用SetTimeout触发AJAX请求
调用Chartrefresh函数

希望对您有帮助。

$(document).ready(function() {  

    Chartrefresh(); 

});

var ctx = $("#mycanvas");
var myChartPF = new Chart(ctx, {

type: 'bar',
    data: {
        datasets: <?php echo json_encode($chartpfscore['data']); ?>,
        labels: <?php echo json_encode($chartpfscore['labels']); ?>,
    },
options: {
    responsive: true,
    title: {
        display: true,
        text: "Score ####",
        fontSize: 22,
    },
    tooltips: {
        mode: 'label'
    },
    legend: {
        display: true,
        position: 'bottom',
    },
    scales: {
        xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: '####'
                    }
                }],
        yAxes: [
                      {
                        stacked: false,
                        position: "left",
                        id: "y-axis-0",
                            scaleLabel: {
                                display: true,
                                labelString: 'Average Score'
                            },
                            ticks: {
                                beginAtZero: true,
                                stepSize: 5

                            }
                      }, {
                        stacked: false,
                        position: "right",
                        id: "y-axis-1",
                            scaleLabel: {
                                display: true,
                                labelString: '###########'
                            },

                             ticks: {
                                beginAtZero: true,
                                stepSize: 1
                            }
                      }
                ]
    }
}

});

function Chartrefresh()
    {
        // Function to autoupdate Chart

        setTimeout(function()
        {           

                $.ajax({
                    url : "<?php echo site_url('ajax/chartrequest')?>",
                    type: "GET",
                    dataType: "JSON",
                       success: function(newDataObject){

                    myChartPF.data.datasets = newDataObject;
                    window.myChartPF.update(); 
                    Chartrefresh();
                }
        }, 1000);

    }

PHP控制器中的数据如下所示（数据和标签）：

[{"data":["58.0000","44.0000","50.6000","49.0000","57.2222","45.6667"],"label":"Average Score","yAxisID":"y-axis-0","backgroundColor":["rgba(222, 30, 101, 0.8)","rgba(171, 158, 153, 0.8)","rgba(125, 94, 166, 0.8)","rgba(228, 110, 23, 0.8)","rgba(21, 62, 140, 0.8)","rgba(241, 214, 31, 0.8)"],"borderWidth":3},{"data":["8","1","5","4","9","3"],"label":"No. Of Resource Schedules","yAxisID":"y-axis-1","borderWidth":3}]


["ProjectA","ProjectB","ProjectC","ProjectD","ProjectE","ProjectF"]

通过PHP，MySQL更新通过ajax调用的图表数据

3 个答案: