js读取csv数据画图

要使用JavaScript读取CSV文件并绘制图表，可以使用以下步骤：

1. 使用XMLHttpRequest对象从服务器获取CSV数据。
2. 将CSV数据解析为JavaScript对象或数组。
3. 使用图表库（如Chart.js）将数据绘制为图表。

下面是一个示例代码，该代码读取名为"data.csv"的CSV文件，并使用Chart.js绘制折线图：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 获取CSV文件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var csvData = xhr.responseText;
        // 将CSV数据解析为JavaScript对象或数组
        var data = parseCSV(csvData);
        // 使用Chart.js绘制折线图
        drawChart(data);
    }
};
xhr.open("GET", "data.csv");
xhr.send();

// 解析CSV数据
function parseCSV(csvData) {
    var lines = csvData.split("\n");
    var headers = lines[0].split(",");
    var data = [];
    for (var i = 1; i < lines.length; i++) {
        var values = lines[i].split(",");
        var obj = {};
        for (var j = 0; j < headers.length; j++) {
            obj[headers[j]] = values[j];
        }
        data.push(obj);
    }
    return data;
}

// 绘制折线图
function drawChart(data) {
    var labels = data.map(function(obj) {
        return obj.date;
    });
    var values = data.map(function(obj) {
        return obj.value;
    });
    var ctx = document.getElementById("myChart").getContext("2d");
    var chart = new Chart(ctx, {
        type: "line",
        data: {
            labels: labels,
            datasets: [{
                label: "My Dataset",
                data: values,
                borderColor: "rgb(255, 99, 132)",
                fill: false
            }]
        },
        options: {
            responsive: true
        }
    });
}

该代码假设CSV文件具有以下格式：

date,value
2020-01-01,10
2020-01-02,20
2020-01-03,30

解析CSV数据的函数将每行数据解析为一个JavaScript对象，并将这些对象存储在一个数组中。然后，绘图函数使用Chart.js创建一个折线图，其中x轴标签为日期，y轴标签为值。