Javascript 使用chart.js创建散点图时出现问题

我一直在尝试使用chart.js创建散点图，并使用从公共api获取的JSON对象中的数据，但是我的图没有创建，但我的控制台上没有收到任何错误，因此我不确定问题出在哪里

这是我的JSON对象的结构

0:{
first_name: "Shkodran"
form: "2.3"
points_per_game: "3.2"
now_cost: 51
second_name: "Mustafi"
web_name: "Mustafi"
minutes: 620
goals_scored: 0
assists: 2
clean_sheets: 2
goals_conceded: 9
}

每个条目都是不同的玩家，共有628条条目

下面是我正在使用的代码

获取公共api并解析响应

var request = new XMLHttpRequest()

var json;

request.open('GET','https://cors- anywhere.herokuapp.com/https://fantasy.premierleague.com/api/bootstrap-static/' , true)

request.onload = function() {

if (request.status >= 200 && request.status < 400) {
json = JSON.parse(this.response);
}
console.log(json);
}
request.send();

---

您的数据不是有效的JSON格式，每个属性都需要用逗号分隔。

generateData

函数中的

y

属性赋值也有错误。应将其改写如下：

function generateData() {
  var data = [];
  json.elements.forEach(element => {
    data.push({
      x: element.now_cost,
      y: element.points_per_game
    });    
  });
  return data;
}

dataset: [{
    data: json.elements.map(e => ({ x: e.now_cost, y: e.points_per_game }))
}]

或者您甚至可以取消此函数

generateData

，并直接按如下方式分配

数据

：

function generateData() {
  var data = [];
  json.elements.forEach(element => {
    data.push({
      x: element.now_cost,
      y: element.points_per_game
    });    
  });
  return data;
}

dataset: [{
    data: json.elements.map(e => ({ x: e.now_cost, y: e.points_per_game }))
}]

---

JSON对象很好，因为我是从公共api获取它的，这是我键入结构时的错误，因为我不想发布代码图片。感谢您指出分配

y

时的错误，但是图形仍然没有绘制，您知道为什么吗？这是我第一次使用chart.js，所以我对它没有太多的经验。也许它与无效的URL有关。您应该在

https://cors-