使用chart.js创建散点图的问题

Question

我一直在尝试使用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();

[我希望我的图是x：now_cost和y：points_per_game，生成散点图的数据集。使用chart.js创建图表]

if (document.readyState === 'complete') { 

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

});
return data;
}

var ctx = document.getElementById('chart1').getContext('2d');

var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
    dataset: [{
        data: generateData()
    }]
},
options: {
    title: {
        display: true,
        text: 'Cost vs Points Per Game Chart'
    },
    scales: {
        xAxes: [{
            title:{
                display:true,
                text: 'Cost'
            },
            type: 'linear',
            position: 'bottom'
        }],
    yAxes: [{
        title:{
            display:true,
            text: 'Points Per Game'
        },
        type: 'linear',
        position: 'bottom'
    }]
    }
}
});
}

Answer 1

您的数据不是有效的JSON格式，每个属性都需要用逗号分隔。 generateData函数内部还有一个错误，分配了y属性。应该将其重写如下：