最后修改时间:2022-12-15 18:28
数据功能模块是 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 文档
通过 data.csv
可以指定需要加载的 CSV 数据,默认情况下,CSV 数据的第一行将作为数据列的名字,第一列表示数据列的名字、x 轴值或时间,后面的列为数据列值。
CSV 数据的加载可以通过 jQuery.get
来获取(当然也可以用其他方法),下面是具体的示例:
分类,苹果,梨,橙子,香蕉
小明,8,4,6,5
小红,3,4,2,3
小张,86,76,79,77
小芳,3,16,13,15
$.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
参数来指定行分隔及列分隔符。
通过 data.table
参数指定 HTML 表格的 id 或 DOM 即可让数据功能模块读取 HTML 表格的数据并创建图表。
提示:如果不需要在页面显示 HTML 表格,可以通过 CSS 样式将其隐藏,实例如下:
#datable {
// 直接不显示
display: none;
// 或者通过定位让其不显示
//position: absolute;
//left: -9999em;
}
Google SpreadSheets 是一个在线数据表格服务。在数据功能模块里,只需要指定 Google SpreadSheets 生成的 Key 即可加载数据并生成图表。
注意事项:
jQuery.get
读取数据本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22