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输出{{1}}

但是，如果我在数据部分{19: 4, 05: 4, 09: 4}中插入冒犯行为，那是行不通的吗？

Answer 1

假设您要填充AJAX的响应，请调用offences变量。您当前的代码有2个问题：

您创建图表的代码已在AJAX调用运行之前运行。在您的代码中，您正在引用offences变量，但尚未填充。
您已将offences定义为全局变量，可以的。但是在AJAX调用中，您将通过在其前面加上offences来定义新的局部变量var。您需要使用以下问题中注释的代码来填充全局offences变量。

    offences = result

解决此问题的一种方法是将您的图表代码包含在新函数中，并在AJAX的成功回调中，将其称为新函数。

//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;

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

1 个答案: