在数据存储或传输中，我们经常用到一些纯文本格式的数据或数据文件，例如 CSV、XML、JSON 格式的数据或文件。这些数据可以是存储在文件中，也可以是服务端接口提供（还有一种可能是服务端动态生成对应的数据文件）。

在 JS 中，我们可以通过发送请求的形式加载数据文件或数据接口，并按照一定的格式解析处理成 JS 对象并最终创建图表。

下面用示例来说明在 JS 中如何处理 CSV、XML、JSON 数据并创建图表的过程。

一、用 CSV 数据创建图表

CSV 是以逗号分隔的数据格式，其每一行是以逗号分隔每一个数值，文件的后缀是 .csv，默认是用 Excel 打开的，并且 Excel 文件可以转换成 CSV 文件。

1、csv 数据

在下面的 CSV 数据例子中，第一行表示分类，后面的每一行用逗号分隔成，第一个值表示数据列名，其后是数据列的数据。

  1. 分类,苹果,梨,橙子,香蕉
  2. 小明,8,4,6,5
  3. 小红,3,4,2,3
  4. 小张,86,76,79,77
  5. 小芳,3,16,13,15

2、定义图表配置对象

下面是我们定义图表配置对象的代码：

  1. var options = {
  2.     chart: {
  3.         type: 'column'
  4.     },
  5.     title: {
  6.         text: '水果消费情况'
  7.     },
  8.     xAxis: {
  9.         categories: []
  10.     },
  11.     yAxis: {
  12.         title: {
  13.             text: '单位'
  14.         }
  15.     },
  16.     series: []
  17. };

其中 series 是一个空数组，我们将在后面 push 数据进行。

3、解析 CSV 数据

我们可以通过 jQuery.get 方法来获取 csv 文件里的数据，并在请求成功回调函数里进行解析数据；

注意不要在 jQuery.get 回调函数之前创建图表，因为该函数是异步的，只有在请求返回数据之后才会执行回调函数。

  1. // 请求 data.csv 数据
  2. $.get('data.csv', function(data) {
  3.     // 分隔每一行
  4.     var lines = data.split('\n');
  6.     // 遍历每一行
  7.     $.each(lines, function(lineNo, line) {
  8.         var items = line.split(',');
  10.         // 处理第一行，即分类
  11.         if (lineNo == 0) {
  12.             $.each(items, function(itemNo, item) {
  13.                 if (itemNo > 0) {
  14.                     options.xAxis.categories.push(item);
  15.                 }
  16.             });
  17.         }
  19.         // 处理其他的每一行
  20.         else {
  21.             var series = {
  22.                 data: []
  23.             };
  24.             $.each(items, function(itemNo, item) {
  25.                 if (itemNo == 0) {
  26.                     series.name = item;   // 数据列的名字
  27.                 } else {
  28.                     series.data.push(parseFloat(item)); // 数据，记得转换成数值类型
  29.                 }
  30.             });
  31.             // 最后将数据 push 到数据列配置里
  32.             options.series.push(series);
  33.         }
  34.     });
  36.     // 创建图表
  37.     var chart = new Highcharts.Chart(options);
  38. });

在线试一试

二、处理 XML 数据

处理 XML 数据和处理 CSV 数据类类似，只是解析方式不同而已。

XML 是用标签标记数据，这个我们常见的 HTML 语法类似，所以我们可以用 jQuery 来解析，下面用示例说明解析过程：

1、XML 数据

data.xml 的文件内容如下：

  1. <chart>
  2.     <categories>
  3.         <item>苹果</item>
  4.         <item>梨</item>
  5.         <item>橙子</item>
  6.         <item>香蕉</item>
  7.     </categories>
  8.     <series>
  9.         <name>小明</name>
  10.         <data>
  11.             <point>8</point>
  12.             <point>4</point>
  13.             <point>6</point>
  14.             <point>5</point>
  15.         </data>
  16.     </series>
  17.     <series>
  18.         <name>小红</name>
  19.         <data>
  20.             <point>3</point>
  21.             <point>4</point>
  22.             <point>2</point>
  23.             <point>3</point>
  24.         </data>
  25.     </series>
  26.     <series>
  27.         <name>小张</name>
  28.         <data>
  29.             <point>86</point>
  30.             <point>76</point>
  31.             <point>79</point>
  32.             <point>77</point>
  33.         </data>
  34.     </series>
  35.     <series>
  36.         <name>小芳</name>
  37.         <data>
  38.             <point>3</point>
  39.             <point>16</point>
  40.             <point>13</point>
  41.             <point>15</point>
  42.         </data>
  43.     </series>
  44. </chart>

2、解析过程

  1. // 加载 XML 文件
  2. $.get('data.xml', function(xml) {
  4.     // 分隔行
  5.     var $xml = $(xml);
  7.     // 处理分类
  8.     $xml.find('categories item').each(function(i, category) {
  9.         options.xAxis.categories.push($(category).text());
  10.     });
  12.     // 处理数据列
  13.     $xml.find('series').each(function(i, series) {
  15.         var seriesOptions = {
  16.             name: $(series).find('name').text(),
  17.             data: []
  18.         };
  20.         // 处理数据类数据
  21.         $(series).find('data point').each(function(i, point) {
  22.             seriesOptions.data.push(
  23.                 parseInt($(point).text())
  24.             );
  25.         });
  27.         // 将数据列对象 push 到数据列数组里
  28.         options.series.push(seriesOptions);
  29.     });
  31.     var chart = new Highcharts.Chart(options);
  32. });

在线试一试

三、处理 JSON 数据

我们知道 Highcharts 的配置本身就是 JSON，所以 JSON 数据无需解析，只需要转换成需要的格式即可，下面是简单的示例说明：

1、JSON 文件内容

  1. [
  2.     [1,12],
  3.     [2,5],
  4.     [3,18],
  5.     [4,13],
  6.     [5,7],
  7.     [6,4],
  8.     [7,9],
  9.     [8,10],
  10.     [9,15],
  11.     [10,22]
  12. ]

2、读取 JSON 并创建图表

  1. $(document).ready(function() {
  3.     var options = {
  4.         chart: {
  5.             renderTo: 'container',
  6.             type: 'spline'
  7.         },
  8.         series: [{}]
  9.     };
  11.     $.getJSON('data.json', function(data) {
  12.         options.series[0].data = data;
  13.         var chart = new Highcharts.Chart(options);
  14.     });
  15. });

在线试一试

原文: https://www.hcharts.cn/docs/process-text-data-file