比较两种方法来可视化CSV文件中的数据

Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

慧都下载Highcharts最新试用版

在本文中，咱们将比较两种方法来可视化CSV文件中的数据：
使用data.cvsURL的精选Highcharts数据模块API解决方案。
使用纯JavaScript编写的自定义解析器，在高级状况下具备更大的灵活性。
让咱们开始吧
不管选择哪一种方式，在处理数据时都必须通读基础知识，例如查找数据源，加载数据和处理数据。

备注

在咱们的文档和API中，您能够找到许多示例和解决方案，使您能够开始工做/处理数据。

咱们将使用来自NASA（国家航空航天局）的数据集，特别是来自NASA戈达德空间研究所的数据集。想法是可视化CSV文件，其中包括1880年至2019年的全球平均温度。

1.数据来源

让咱们获取Zonal年均CSV文件，将其存储在GitHub上以用于专用的Highcharts解决方案，并在本地以自定义方式使用。CSV文件包含几列：Year，Glob，Nhem，北半球等。这些列用逗号分隔。该文件并非真的要让人可读。您能够经过多种方式查看更易于阅读的CSV文件。例如，在自定义演示中，您可使用Highcharts导出数据模块来查看数据以电子表格格式的外观，咱们强烈建议将其用于此目的。

2.数据加载

要开始使用数据，咱们须要将其加载到脚本中。对于内置的Highcharts解决方案，这就像设置data.cvsURL选项同样简单。

对于自定义解析器，咱们将使用Fetch API标准。咱们还将对现代浏览器支持的自定义解决方案使用await和async语法。使用JavaScript的最新功能时，请记住检查浏览器的容量。当您想得到较旧浏览器的支持时，最好将代码编译为较旧的ES5语法。

3.数据解析

若是您使用内置的Highcharts解决方案，那么数据模块将使您免去进行数据解析的麻烦，而且您能够直接跳到“数据可视化”部分（请参见第4.节“数据可视化”）。

可是，对于自定义解决方案，有各类JavaScript库能够解析CSV。经过解析，咱们的意思是找出全部逗号的位置，分解数据，并将其放入对象中以使其可用。对于此数据集，使用split函数手动进行解析很是简单。顺便说一句，JavaScript变量中的一段文本是一个字符串对象，而且具备称为split的功能。该函数容许您获取任意文本并将其拆分为数组的不一样元素。这基本上就是咱们想要作的；咱们要拆分全部行，而后在每一行中拆分全部列。split函数仅须要一个参数-分隔符或称为定界符。在这种状况下，咱们有两种定界符。对于每一行，将一行与另外一行区分开的定界符是一个换行符。因此首先 让咱们用换行符将其称为split。一样，咱们不须要第一行–第一行对于咱们人类来讲确实是有用的信息，他们能够考虑数据是什么，可是对于这种用途，咱们但愿将年份做为一个类别。

如今，重要的是要知道这些数据是干净的：没有空日期，没有错误，没有空块。可是，若是数据中有逗号，则此解析系统将崩溃。即便对于CSV文件有约定，在不该拆分的信息周围都使用引号，但在其中有逗号的地方，您始终必须检查数据。您还可能会发现您的数据还没有采用CSV格式，所以请确保手动或经过CSV转换器/清理器工具消除数据中没必要要的空格和逗号。.这可能须要作不少工做进入分析和清理项目的数据。

4.数据可视化

如今，咱们准备使用简单的折线图来可视化数据。
对于专用的Highcharts解决方案，数据托管在GitHub中，而且只需一行代码便可提取数据（因为data-module）：
data:{
csvURL：“ https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/globalTemperatureChange.csv”，
}
Highcharts数据模块为您完成了全部繁重的工做，以获取，处理和准备要可视化的数据。是的，就是这么简单.
在下面，您可使用自定义代码查看相同的数据和图表类型（请参见下面的图表）：

即便图表看起来类似，但幕后的代码却不一样。如今，再也不须要一行数据来使用数据模块来获取数据，而是具备针对同一做业的完整功能：
async function getData() {
const date = [],
globalTemp = [],
northernTemp = [],
southernTemp = [],
response = await fetch('../ZonAnn.Ts+dSST.csv'),
data = await response.text(),
rows = data.split(/\n/).slice(1);

rows.forEach(element => {
const row = element.split(','),
year = row[0],
gt = +row[1],
nt = +row[2],
st = +row[3];

date.push(year);
globalTemp.push(gt);
northernTemp.push(nt);
southernTemp.push(st);

})

return {
date,
globalTemp,
northernTemp,
southernTemp
}
}
上面的函数从本地存储中获取数据，对其进行清理，处理，而后以四个不一样的数组返回结果。
对于这两个示例，其想法都是以CSV的形式加载表格数据并将其可视化。咱们必须经历数据处理，而后在图表上显示数据。在第一个演示中，Highcharts数据模块提供了一种现成的解决方案来获取和处理数据。在大多数状况下，咱们建议使用此选项。可是，若是须要进行特定处理，则始终可使用自定义代码。

咱们鼓励您使用从本文中学到的知识来建立具备不一样数据和技术的交互式图表。随时欢迎您在本文下提出您的问题和意见。

APS帮助提高企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不一样场景的生产计划，提升准时交货能力，提升产能和资源利用率

想要购买Highcharts正版受权，或了解更多产品信息请点击【咨询在线客服】