Javascript 解析CSV，然后使用数据构建Highcharts条形图

我想在JS FIDDLE中创建一个条形图可视化，它将可视化每个类别的消费者的“2018年第一季度（TTM）年度客人价值”和“第一次和第二次拜访之间的天数”，即：['1'，'2'，…'29+'。条形图应该是这样的（图例涵盖了第一类，但我会解决这个问题）：

我假设数据已经存在于CSV中，如下所示：

我有一个界面，允许用户导入CSV文件。在这里：

//文件上载的事件侦听器
document.getElementById（'txtFileUpload'）。addEventListener（'change'，upload，false）；
//方法，该方法检查浏览器是否支持HTML5文件API
函数browserSupportFileUpload（）{
var isCompatible=假；
if（window.File&&window.FileReader&&window.FileList&&window.Blob）{
isCompatible=true；
}
返回是不可竞争的；
}
功能上传（evt）{
如果（！browserSupportFileUpload（））{
警报（'此浏览器不完全支持文件API！'）；
}否则{
var数据=null；
var file=evt.target.files[0]；
var reader=new FileReader（）；
reader.readAsText（文件）；
reader.onload=函数（事件）{
var csvData=event.target.result；//警报（csvData）；
var data2=csvData.split（“\n”）；//警报（data2）；
var i；
对于（i=0；i0）{
警报（'Imported-'+data2.length+'-rows successfully！'）；
}否则{
警报（“没有要导入的数据！”）；
}
};
reader.onerror=函数（）{
警报（'无法读取'+文件名'）；
};
}
}

文件上传测试

选择要上载的CSV文件

我需要解析的数据的正确形式是什么？是var吗 data2=csvData.split（“\n”）还是var csvData= 事件、目标、结果

在您的示例中，我建议您在CSV字符串解析器中分离类别和系列数据，并返回两个包含数据的不同系列，如下所示：

var parseCSV = function(csv) {
    var lines = csv.split("\n").map(line => line.split(",")) // split string to lines
    var categories = []
    var series = [{
      name: 'Q1 / 18 (TTM) Annual Guest Value',
      color: 'grey',
      data: [],
      dataLabels: {
        style: {
          color: 'grey'

        }
      }
    }, {
      name: 'Days Between 1st and 2nd Visits',
      color: 'green',
      data: [],
      dataLabels: {
        style: {
          color: 'green'
        }
      }
    }]
        // Parse every line of csv file.
    lines.forEach((line, i) => {
      if (i !== 0) {
        var cat = line[0].slice(1, -1)
        var p1 = parseFloat(line[1])
        var p2 = parseFloat(line[2])

        categories.push(cat)
        series[0].data.push(p1)
        series[1].data.push(p2)
      }
    })
    // return the object with categories and series
    return {
        categories: categories,
      series: series
    }
  }

然后只分配类别和系列：

var parsedCSV = parseCSV(csv)

Highcharts.chart('container', {
  xAxis: {
    categories: parsedCSV.categories
  },
  series: parsedCSV.series
})

我是否在.get（）中正确地引入了变量csvData（或data2，如果这是正确的）？我不是Javascript方面的专家，但我非常确定，例如变量csvData是reader.onload=function（event）{}的本地变量，因此我需要访问这个本地变量。如何将其正确地引入.get（）？简单地编写.get（csvData，function（csvFile）{行吗

我看不到您的整个项目结构，但是是的，

csvData

和

data2

变量范围仅限于

reader.onload

函数，因此除了此事件函数外，您不能在任何地方调用

get（）

最后但并非最不重要的一点是，把所有的东西都放在一起，我如何允许 界面，首先允许用户上载CSV文件，然后 上传后，界面将更改为Highcharts条形图？ 是否需要编写某种代码来执行此操作

实际上，我认为生成图表的过程应该是这样的：

var parseCSV = function(csv) {
    var lines = csv.split("\n").map(line => line.split(",")) // split string to lines
    var categories = []
    var series = [{
      name: 'Q1 / 18 (TTM) Annual Guest Value',
      color: 'grey',
      data: [],
      dataLabels: {
        style: {
          color: 'grey'

        }
      }
    }, {
      name: 'Days Between 1st and 2nd Visits',
      color: 'green',
      data: [],
      dataLabels: {
        style: {
          color: 'green'
        }
      }
    }]
        // Parse every line of csv file.
    lines.forEach((line, i) => {
      if (i !== 0) {
        var cat = line[0].slice(1, -1)
        var p1 = parseFloat(line[1])
        var p2 = parseFloat(line[2])

        categories.push(cat)
        series[0].data.push(p1)
        series[1].data.push(p2)
      }
    })
    // return the object with categories and series
    return {
        categories: categories,
      series: series
    }
  }

生成空图表（或带有一些初始数据）

从文件中获取CSV

你有多少钱

解析时，只需使用

chart.update（）

方法使用新的

categories

和整个

series

对象更新图表

API参考：

以正确方式解析数据的实时示例：