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

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

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

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

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 数据进行。

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

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

在线试一试

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

1、XML 数据

data.xml 的文件内容如下：

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

在线试一试

我们知道 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],