通过json请求未填充的Chartjs数据

Question

我正在使用PHP和SQL生成一个数组，该数组计算具有相同值的数据，以及这些值中有多少输出json_encode到：

<代码>{“05”：4,“09”：4,“19”：4}

Chart.js文件：（向下修剪）

// Chart
var ctx = document.getElementById("monthAbuseChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["1", "2", "3"],
      datasets: [{
        label: "Offences",
        //data: [0, 7, 5] This works
        data: offences // This doesn't
    }],
  }
  }
});
// Grab the data for offences:
var offences = []

  $.ajax({
    method: "POST",
    url: "sql/monthabuse.php",
    dataType : 'json',
    success: function (result) {

      //offences = result;
        var offences = result;
        console.log(result);
    },
  });

console.log输出{19：4,05：4,09：4}

但是，如果我将罪行放入数据部分data:configures，它就不起作用了？

Answer 1

假设您希望将ajax调用的响应填充到combines变量中。当前代码有2个问题：

>

创建图表的代码在AJAX调用运行之前正在运行。在您的代码中，您引用了combines变量，但它尚未填充。

您已经将configures定义为全局变量，这是可以的。但是在AJAX调用中，您再次定义了一个新的局部变量configures，方法是在它前面加上var。您需要使用下面的代码填充全局的comficationsvar（在您的问题中有注释）。

    offences = result

解决这一问题的一种方法是将图表代码包含在一个新函数中，并在AJAX的success回调中调用这个新函数。

//Global Variable
var offences = [];

function createMonthAbuseChart() {
    var ctx = document.getElementById("monthAbuseChart");
    var myLineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["1", "2", "3"],
          datasets: [{
            label: "Offences",
            //data: [0, 7, 5] This works
            data: offences // This doesn't
        }],
      }
      }
    });
}

// Grab the data for offences:
$.ajax({
  method: "POST",
  url: "sql/monthabuse.php",
  dataType : 'json',
  success: function (result) {
      offences = result;
      console.log(result);
      createMonthAbuseChart(); //Call the Chart Create Method Here.
  },
});

您必须确保AJAX调用返回的数据具有与图表所需的数据相同的格式，即[0,7,5]。从您的问题来看，AJAX调用返回的是{19:4,05:4,09:4}。您可以使用以下代码将其转换为[4,4,4]

    offences = Object.values(result);

在AJAX回调中使用上面的行而不是下面的行

    offences = result;