javascript - 如何将 csv ajax 请求的返回值用于 x 和 y 值？

问题描述

我正在尝试导入一个 csv 文件并将其用作我在 ChartJs 中的散点图的数据源。当我打印 dataPoints 时，我得到了正确值的对象数组，所以我知道 ajax 请求正在正确提取。但我似乎无法将这些值作为 x 和 y 值传递到我的数据集数据中。

我能够使用canvasJS成功提取数据并将其插入x和y值，不幸的是该框架不是免费的，所以我试图切换到chart.js。我尝试插入 data: [{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 时，一切都显示得很好。

标签： javascriptajaxcsvchart.js

javascript - 如何将 csv ajax 请求的返回值用于 x 和 y 值？

问题描述

解决方案

推荐阅读