最后修改时间:2022-12-15 18:28
在数据存储或传输中,我们经常用到一些纯文本格式的数据或数据文件,例如 CSV、XML、JSON 格式的数据或文件。这些数据可以是存储在文件中,也可以是服务端接口提供(还有一种可能是服务端动态生成对应的数据文件)。
在 JS 中,我们可以通过发送请求的形式加载数据文件或数据接口,并按照一定的格式解析处理成 JS 对象并最终创建图表。
下面用示例来说明在 JS 中如何处理 CSV、XML、JSON 数据并创建图表的过程。
CSV 是以逗号分隔的数据格式,其每一行是以逗号分隔每一个数值,文件的后缀是 .csv
,默认是用 Excel 打开的,并且 Excel 文件可以转换成 CSV 文件。
在下面的 CSV 数据例子中,第一行表示分类,后面的每一行用逗号分隔成,第一个值表示数据列名,其后是数据列的数据。
分类,苹果,梨,橙子,香蕉
小明,8,4,6,5
小红,3,4,2,3
小张,86,76,79,77
小芳,3,16,13,15
下面是我们定义图表配置对象的代码:
var options = {
chart: {
type: 'column'
},
title: {
text: '水果消费情况'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: '单位'
}
},
series: []
};
其中 series 是一个空数组,我们将在后面 push 数据进行。
我们可以通过 jQuery.get
方法来获取 csv 文件里的数据,并在请求成功回调函数里进行解析数据;
注意不要在 jQuery.get
回调函数之前创建图表,因为该函数是异步的,只有在请求返回数据之后才会执行回调函数。
// 请求 data.csv 数据
$.get('data.csv', function(data) {
// 分隔每一行
var lines = data.split('\n');
// 遍历每一行
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// 处理第一行,即分类
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) {
options.xAxis.categories.push(item);
}
});
}
// 处理其他的每一行
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item; // 数据列的名字
} else {
series.data.push(parseFloat(item)); // 数据,记得转换成数值类型
}
});
// 最后将数据 push 到数据列配置里
options.series.push(series);
}
});
// 创建图表
var chart = Highcharts.chart('container', options);
});
处理 XML 数据和处理 CSV 数据类类似,只是解析方式不同而已。
XML 是用标签标记数据,这个我们常见的 HTML 语法类似,所以我们可以用 jQuery 来解析,下面用示例说明解析过程:
data.xml 的文件内容如下:
<chart>
<categories>
<item>苹果</item>
<item>梨</item>
<item>橙子</item>
<item>香蕉</item>
</categories>
<series>
<name>小明</name>
<data>
<point>8</point>
<point>4</point>
<point>6</point>
<point>5</point>
</data>
</series>
<series>
<name>小红</name>
<data>
<point>3</point>
<point>4</point>
<point>2</point>
<point>3</point>
</data>
</series>
<series>
<name>小张</name>
<data>
<point>86</point>
<point>76</point>
<point>79</point>
<point>77</point>
</data>
</series>
<series>
<name>小芳</name>
<data>
<point>3</point>
<point>16</point>
<point>13</point>
<point>15</point>
</data>
</series>
</chart>
// 加载 XML 文件
$.get('data.xml', function(xml) {
// 分隔行
var $xml = $(xml);
// 处理分类
$xml.find('categories item').each(function(i, category) {
options.xAxis.categories.push($(category).text());
});
// 处理数据列
$xml.find('series').each(function(i, series) {
var seriesOptions = {
name: $(series).find('name').text(),
data: []
};
// 处理数据类数据
$(series).find('data point').each(function(i, point) {
seriesOptions.data.push(
parseInt($(point).text())
);
});
// 将数据列对象 push 到数据列数组里
options.series.push(seriesOptions);
});
var chart = Highcharts.chart('container', options);
});
我们知道 Highcharts 的配置本身就是 JSON,所以 JSON 数据无需解析,只需要转换成需要的格式即可,下面是简单的示例说明:
[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]
$(document).ready(function() {
var options = {
chart: {
type: 'spline'
},
series: [{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = Highcharts.chart('container', options);
});
});
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 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