javascript - 如何将查询的数据(通过帖子)放在我的 jquery 图表上？

Question

我正在使用 mdb bootstrap 显示数据库中保存的数据。我遇到的问题是，当我使用 $.post 时，我的饼图消失了。控制台中的错误是 Uncaught SyntaxError: Unexpectedidentifier ，这出现在 varhold = 1; 行上，我不熟悉 javascript，看不到我的错误这里。这是我的代码:

<!-- Charts -->
<script>
$(document).ready(function(){

    //pie
    var ctxP = document.getElementById("pieChart").getContext('2d');
    var myPieChart = new Chart(ctxP, {

           var hold = 1;
           var data_String;
           data_String = 'hold='+hold
           $.post('fetch/ft-invoice-breakdown.php',data_String,function(data){
                 var data = jQuery.parseJSON(data);
              });


        type: 'doughnut',
        data: {
            labels:['Pending', 'Approved', 'Paid', 'Blocked', 'Cancelled'],
            datasets: [
                {
                    data: [9, 6, 4, 1, 0],
                    backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                    hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                }
            ]
        },
        options: {
            responsive: true
        }
    });
});
</script>

我还需要将 data: [9, 6, 4, 1, 0] 替换为我在帖子中查询的值。这样做只是data: data吗？我已经进行了很多搜索，但找不到任何使用数据库设置此图表的示例。此图表由Material Bootstrap(mdb)提供

更新:帖子正在运行

但我的问题仍然是我无法将 chartData (我与 data 交换)放入图表的数据集。我尝试将 chartData 设为全局变量，但我的图表对象中仍然无法识别它。

<!-- Charts -->
<script>
var chartData
$(document).ready(function(){

  $.ajax({
    url: '../fetch/ft-invoice-breakdown.php',
    type: 'POST',
    success: function(msg){
      var chartData = msg;
    }
  });
  alert(chartData);

    //pie
    var ctxP = document.getElementById("pieChart").getContext('2d');
    var myPieChart = new Chart(ctxP, {

        type: 'doughnut',
        data: {
            labels:['Pending', 'Approved', 'Paid', 'Blocked', 'Cancelled'],
            datasets: [
                {
                    data: chartData,
                    backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                    hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                }
            ]
        },
        options: {
            responsive: true
        }
    });
});
</script>

my alert(chartData); 打印 undefined。

更新 2:PHP“post”的响应为 [1,5,8,0,0]

Answer 1

自从发送 $ajax 请求后 asynchronously ，除非您设置 async:false ，否则我认为您需要在收到响应后绘制图表。

类似于:

function drawChart(chartData){
    //pie
    var ctxP = document.getElementById("pieChart").getContext('2d');
    var myPieChart = new Chart(ctxP, {

        type: 'doughnut',
        data: {
            labels:['Pending', 'Approved', 'Paid', 'Blocked', 'Cancelled'],
            datasets: [
                {
                    data: chartData,
                    backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
                    hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
                }
            ]
        },
        options: {
            responsive: true
        }
    });
}
$(document).ready(function(){

    $.ajax({
    url: '../fetch/ft-invoice-breakdown.php',
    type: 'POST',
    success: function(msg){
        drawChart(msg);  //Call this method on successful data retrieval with msg as parameter 
    }
    });


});