数据功能模块

数据功能模块是 Highcharts 提供的直接解析数据的功能模块，通过该模块，我们可以直接用 CSV、HTML 表格、Google SpreadSheets 数据来生成图表。

相比前面的教程 “处理文本或文本数据文件`” 里提到的处理方法，用数据功能模块可以省去自己解析数据，并可以通过灵活的配置参数来处理数据。

使用数据功能模块需要额外的引入相关的文件：

<script src="http://cdn.hcharts.cn/highcharts/modules/data.js"></script>

一、数据功能模块概述

数据功能模块本质上是将数据处理二位表格数据（CSV 、HTML 表格、Google SpreadSheets 本质上也是二维表结构，只是数据格式不同），并转换成数据列的过程。

通过灵活的配置参数，我们可以指定数据表的范围、解析形式、数据处理方式等；其中 startRow、endRow、startColumn、endColumn 可以指定数据范围；switchRowsAndColumns 可以将数据表行列对调（即行列变换）；seriesMapping 可以指定数据列与数据的映射关系；dateFormat、decimalPoint 可以处理数据的格式化。

更多详细的配置参数详见 API 文档

二、 加载 CSV 数据

通过 data.csv 可以指定需要加载的 CSV 数据，默认情况下，CSV 数据的第一行将作为数据列的名字，第一列表示数据列的名字、x 轴值或时间，后面的列为数据列值。

CSV 数据的加载可以通过 jQuery.get 来获取（当然也可以用其他方法），下面是具体的示例：

1、CSV 文件内容

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

2、图表代码

$.get('data.csv', function(csv) {
  var chart = Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    data: {
      csv: csv // 指定 CSV 数据
    },
    title: {
      text: 'Fruit Consumption'
    },
    yAxis: {
      title: {
        text: 'Units'
      }
    }
  });
});

在线试一试

提示：对于 CSV 数据，我们可以通过 lineDelimiter 及 itemDelimiter 参数来指定行分隔及列分隔符。

二、加载 HTML 表格数据

通过 data.table 参数指定 HTML 表格的 id 或 DOM 即可让数据功能模块读取 HTML 表格的数据并创建图表。

在线试一试

提示：如果不需要在页面显示 HTML 表格，可以通过 CSS 样式将其隐藏，实例如下：

#datable {
    // 直接不显示
    display: none;
    // 或者通过定位让其不显示
    //position: absolute;
    //left: -9999em;
}

三、加载 Google SpreadSheets

Google SpreadSheets 是一个在线数据表格服务。在数据功能模块里，只需要指定 Google SpreadSheets 生成的 Key 即可加载数据并生成图表。

在线试一试

注意事项：

• Google SpreadSheets 是 Google 提供的服务，国内访问可能不顺畅，请自备梯子
• 数据功能模块读取 Google SpreadSheets 需要引入 jQuery，因为内部用 jQuery.get 读取数据