Как я могу использовать возвращаемые значения из csv ajax-запроса для значений x и y?

Question

Я пытаюсь импортировать CSV-файл и использовать его в качестве источника данных для моей точечной диаграммы в ChartJs.Когда я печатаю dataPoints, я получаю объектные массивы правильного значения, поэтому я знаю, что ajax-запрос работает правильно.Но я не могу передать эти значения в данные наборов данных в виде значений x и y.

Мне удалось успешно извлечь данные и подключить их к значениям x и y с помощью canvasJS, к сожалению, инфраструктура не является бесплатной, поэтомуЯ пытаюсь перейти на chart.js.Я пытался подключить данные: [{dataPoints: pullData ()}] или data: pullData () или data: [dataPoints] и множество других комбинаций, но ни одна из них не работает.Я знаком с кодированием в Swift и Java, но я особенно новичок в Javascript.Любая помощь будет принята с благодарностью!

const CHART = document.getElementById("scatterChart");
console.log(CHART);
var scatterChart = new Chart(CHART, {
type: 'scatter',
data: {
    datasets: [{
        label: 'Scatter Dataset',
        data: [{
            x: -10,
            y: 0
        }, {
            x: 0,
            y: 10
        }, {
            x: 10,
            y: 5
        }],
        borderColor: 'black',
         borderWidth: 1,
         pointBackgroundColor: '#00bcd6',
         pointRadius: 5,
         pointHoverRadius: 5,
         fill: false,
         tension: 0.5,
         showLine: true
    }]
},
options: {
    scales: {
        xAxes: [{
            type: 'linear',
            position: 'bottom'
        }],
        yAxes: [{
            type: 'linear',
            position: 'left'
        }]
    }
}
});

window.onload = function(){
$.ajax({
   type: "GET",
   url: "mockData.csv",
   dataType: "text",
   success: function (result){
    var data = $.csv.toArrays(result);
    var dataPoints = [];
    for (var i = 0; i < data.length; i++)
        dataPoints.push({ 
                    x: data[i][0], 
                    y: data[i][1]
        });
        console.log(dataPoints)
    return dataPoints
   }
})
};

Моя цель состоит в том, чтобы построить точки из CSV (который состоит всего из 5 строк и 2 столбцов основных чисел), но вместо этого точки не отображаются.Где, когда я вручную вставляю значения в x и y, все выглядит нормально.

Answer 1

Вам необходимо переместить создание диаграммы внутрь функции успеха вызова ajax или передать dataPoints в какую-то другую функцию, которая создает диаграмму.

Answer 2

После предложения @terpinmd мне удалось решить проблему.Ниже приведено кодовое решение:

function getDataPointsFromCSV(csv) {

    var dataPoints = csvLines = points = [];
    for (var i = 0; i < csv.length; i++)
        dataPoints.push({ 
                    x: csv[i][0], 
                    y: csv[i][1]
        });
        console.log(dataPoints)
    return dataPoints
 }

 window.onload = function(){
var dataPoints = [];
$.ajax({
   type: "GET",
   url: "mockData.csv",
   dataType: "text",
   success: function (result){
    var data = $.csv.toArrays(result);

    const CHART = document.getElementById("scatterChart");
    console.log(CHART);
    var scatterChart = new Chart(CHART, {
        type: 'scatter',
        data: {
            datasets: [{
                label: 'Scatter Dataset',
                data: getDataPointsFromCSV(data),
                borderColor: 'black',
                 borderWidth: 1,
                 pointBackgroundColor: '#00bcd6',
                 pointRadius: 5,
                 pointHoverRadius: 5,
                 fill: false,
                 tension: 0.5,
                 showLine: true
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom'
                }],
                yAxes: [{
                    type: 'linear',
                    position: 'left'
                }]
            }
        }
    });
   }
})

};