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

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

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

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

一、数据功能模块概述

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

通过灵活的配置参数,我们可以指定数据表的范围、解析形式、数据处理方式等;其中 startRowendRowstartColumnendColumn 可以指定数据范围;switchRowsAndColumns 可以将数据表行列对调(即行列变换);seriesMapping 可以指定数据列与数据的映射关系;dateFormatdecimalPoint 可以处理数据的格式化。

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

二、 加载 CSV 数据

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

CSV 数据的加载可以通过 jQuery.get 来获取(当然也可以用其他方法),下面是具体的示例:

1、CSV 文件内容

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

2、图表代码

  1. $.get('data.csv', function(csv) {
  2. $('#container').highcharts({
  3. chart: {
  4. type: 'column'
  5. },
  6. data: {
  7. csv: csv // 指定 CSV 数据
  8. },
  9. title: {
  10. text: 'Fruit Consumption'
  11. },
  12. yAxis: {
  13. title: {
  14. text: 'Units'
  15. }
  16. }
  17. });
  18. });

在线试一试

提示:对于 CSV 数据,我们可以通过 lineDelimiteritemDelimiter 参数来指定行分隔及列分隔符。

二、加载 HTML 表格数据

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

在线试一试

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

  1. #datable {
  2. // 直接不显示
  3. display: none;
  4. // 或者通过定位让其不显示
  5. //position: absolute;
  6. //left: -9999em;
  7. }

三、加载 Google SpreadSheets

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

在线试一试

注意事项:

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

原文: https://www.hcharts.cn/docs/data-modules