最近在做一个小项目,使用到Highcharts展示图表,其中通过 ajax 来异步获取 json 数据。在此期间,遇到了几个问题,今天总结一下分享给大家。
首先,准备json数据源。我用的php进行后台程序开发,从mysql数据库读取数据。通过json_encode()函数对数据进行JSON 编码 , 中文出现乱码 问题。这是因为json_encode()只支持UTF-8编码,所以使用内置的JSON_UNESCAPED_UNICODE选项逃过编码,json_encode($result,JSON_UNESCAPED_UNICODE)。
其次,ajax 的$.getJSON(url, function(data) {}函数获取php中get请求发送的json对象。json对象包括两种:{“key”:”value”}形式的键值对和[{“key”:”value”},{“key”:”value”},{},{}]数组形式。
问题1:获取json数据长度问题。{“key”:”value”}形式的的json对象不能直接调用length函数获取长度。
function getJsonLength(jsonData){
var jsonLength = 0;
for(var item in jsonData){
jsonLength++;
}
return jsonLength;
}
[{“key”:”value”},{“key”:”value”},{},{}]数组形式可以通过length函数获取长度。
问题2:虽然已经获取到data json对象,但是 highcharts就是不显示数据 。因为此时数据是 字符串 ,需要将对象值转换为数值。
outdoor_options.xAxis.categories[i] = data[i].date;
outdoor_options.series[0].data[i] = parseFloat (data[i].outdoor);//parseFloat()函数将返回的字符类型转换为 浮点数 ,很关键