Question

首先发布在这里，我对javascript很新，所以希望能正确解释我的问题。我正在尝试将数据从csv文件处理为JSON并使用此数据创建Highcharts图表，但不知道从哪里开始。我看了很多答案，但似乎并没有完全解决我的问题。我的目标是从位于同一服务器上的csv文件生成Highcharts堆积区域图表。

我现在使用的Highcart代码使用单个数组作为x轴命名类别（在此示例中为年）： var categories = [ '1850', '1900', '1950', '2000']; 和数据库的JSON：var data = [{ name: 'Line1', data: [116, 127, 131, 143] }, { name: 'Line2', data: [206, 217, 221, 233] }, { name: 'Line3', data: [303, 313, 326, 338] }]

以前答案中使用的大多数数据集和图表都使用带有时间序列垂直表示的csv文件，其中第二列用于数据。比如去年的每日股票价格。

但我打算使用的data.csv文件如下所示：

Lines, ‘1850’, ‘1900’, ‘1950’, ‘2000’
Line1, 116, 127, 131, 143
Line2, 206, 217, 221, 233
Line3, 303, 313, 326, 338

我正在考虑使用这样的$ .get函数：$.get(‘data.csv’, function (csvfile) { //existing code for creating the chart… }并创建一个函数，用于将csv数据解析为变量Data和变量Categories。但我不知道如何做到这一点..

基本代码（带有硬编码数据）：JSfiddle

有人知道我需要将哪些javascript代码解析为Highcharts图表的json /数据？

编辑：我使用此代码通过ajax调用读取csv数据并处理接收到的数据：

  $(document).ready(function() {
$.ajax({
    type: "GET",
    url: "data.csv",
    dataType: "text",
    success: function(data) {processData(data);}
});
});

function processData(data) {
var table = data.split("\n").map(line => line.split(","));
var categories = table[0].slice(1);
var data = table.slice(1).map(a => ({"name": a[0], "data": a.slice(1)}));
console.log(data);
console.log(categories);};

数据接收正确，但数组由字符串而不是数字组成。我需要在processData函数中修改哪个部分来获取number数据类型？

Answer 1

假设您的csv数据以"Lines,1850,1900,1950,2000\nLine1,116,127,131,143\nLine2,206,217,221,233\nLine3,303,313,326,338"的形式到达，那么为了构建您的类别和数据数组，您可以执行以下操作;

＆＃13;

var csvData = "Lines,1850,1900,1950,2000\nLine1,116,127,131,143\nLine2,206,217,221,233\nLine3,303,313,326,338",
      table = csvData.split("\n").map(line => line.split(",")),
 categories = table[0].slice(1),
       data = table.slice(1).map(a => ({"name": a[0], "data": a.slice(1)}));

console.log(categories);
console.log(data);

＆＃13;

如果您希望以数字类型而不是字符串形式接收数组内容，则可以执行以下操作;

＆＃13;

var csvData = "Lines,1850,1900,1950,2000\nLine1,116,127,131,143\nLine2,206,217,221,233\nLine3,303,313,326,338" ,
      table = csvData.split("\n").map(line => line.split(",")),
 categories = table[0].slice(1).map(e=>e*1),
       data = table.slice(1).map(a => ({"name": a[0], "data": a.slice(1).slice(1).map(e=>e*1)}));

console.log(categories);
console.log(data);

＆＃13;

Highcharts csv数据加载并解析为单独的数组和json

1 个答案: