Highcharts CSV数据加载并解析为单独的数组和json [英] Highcharts csv data loading and parse into separate array and json

问题描述

第一篇文章在这里，我对javascript很陌生，所以希望能正确解释我的问题.我正在尝试将csv文件中的数据处理为JSON，并使用此数据创建Highcharts图表，但不知道从哪里开始.我调查了很多答案，但它们似乎并未完全解决我的问题.我的目标是从位于同一服务器上的csv文件生成Highcharts堆积面积图.

First post here, and I am quite new to javascript so hopefully explaining my question correct. I am trying to process data from a csv file into JSON and create a Highcharts chart with this data, but don’t know where to start. I looked into a lot of answers but they do not fully seem to address my question. My goal is to produce a Highcharts stacked area chart from a csv file located on the same server.

我现在拥有的Highcart代码在x轴上使用一个数组来命名类别(在本示例中为年): var Categories = ['1850'，'1900'，'1950'，'2000']; 以及用于数据系列的JSON: var data = [{名称:"Line1"，数据:[116、127、131、143]}，{名称:"Line2"，数据:[206、217、221、233]}，{名称:"Line3"，数据:[303、313、326、338]}]

The Highcart code I now have uses a single array for the x-axis named categories (years in this example): var categories = [ '1850', '1900', '1950', '2000']; and a JSON for the dataseries: var data = [{ name: 'Line1', data: [116, 127, 131, 143] }, { name: 'Line2', data: [206, 217, 221, 233] }, { name: 'Line3', data: [303, 313, 326, 338] }]

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

Most datasets and charts used in previous answers use a csv file with vertical representation of time series where the second column is used for the data. For instance the daily stockprice of last year.

但是我打算使用的data.csv文件看起来像这样:

But the data.csv file I am planning to use looks like this:

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){//用于创建图表的现有代码…} 并创建用于将csv数据解析为变量Data和变量Categories的函数.但是我不知道如何执行此操作.

I was thinking about using a $.get function like this:$.get(‘data.csv’, function (csvfile) { //existing code for creating the chart… } and create a function for parsing the csv data into the variable Data and the variable Categories. But I have no clue how to do this..

其中的基本代码(带有硬编码数据): JSfiddle

The basic code (with hardcoded data) in this: JSfiddle

有人知道我需要将CSV数据解析为Highcharts图的json/data中的哪些JavaScript代码吗?

Does someone have an idea which javascript code I need to parse CSV data into the json/data of the Highcharts graph ?

我使用以下代码通过ajax调用读取csv数据并处理接收到的数据:

I use this code to read the csv data through an ajax call and an process the received data:

  $(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函数中修改哪一部分以获得数字数据类型?

The data is received correct but the array consists of strings instead of numbers. Which part do i need to modify in the processData function to get number datatype?

推荐答案

假设您的csv数据以"Lines，1850,1900,1950,2000 \ nLine1,116,127,131,143 \ nLine2,206,217,221,233 \ nLine3的形式到达，303,313,326,338"，然后为了构造您的类别和数据数组，您可以按照以下步骤操作；

Assuming that your csv data arrives in the form of "Lines,1850,1900,1950,2000\nLine1,116,127,131,143\nLine2,206,217,221,233\nLine3,303,313,326,338" then in order to construct your categories and data arrays you might do as follows;

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);

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

And if you would like to receive the array contents as number type instead of string you may do as follows;

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);

这篇关于Highcharts CSV数据加载并解析为单独的数组和json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！