Question

我正在使用mdb引导程序来显示保存在数据库中的数据。我遇到的问题是，当我使用$.post时，饼图消失了。控制台中的错误为Uncaught SyntaxError: Unexpected identifier，出现在var hold = 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吗？我已经进行了许多搜索，但找不到任何使用db设置此图表的示例。此图表由材料引导程序（mdb）提供

更新：帖子现在可以使用

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

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

我的alert(chartData);打印undefined。

更新2：来自PHP“帖子”的回复为[1,5,8,0,0]

Answer 1

由于asynchronously发送了$ajax个请求，除非您设置async:false，否则我认为一旦获得响应，就需要绘制出ChartChart。

类似的东西：

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


});

如何将查询的数据（通过发布）放在我的jquery图表上？

1 个答案: