这个项目中用到图表来展示数据,效果图
点击日期按钮返回不同时间段的数据波动。
图表是使用的ichart.js 使用方法点击这里查看
1 ichart基本展示
看过实例就知道,ichart.js 主要核心属性是 data 和 label 。其中前者用来决定图表中数据显示 后者是图表的X 轴轴标
数据表的Y轴由 srtart_scale end_scale scale_space 分别是起点数值 终点数值 数值间隔量
2 数据处理
当前页面使用ajax获取数据
$.get('?', {
start: startTime,
end: endTime
},
function(result){
console.log(result)
}
)
这样控制台上出现的结果是以JSON格式出现的
我这里需要的是第二个数据值data .
将JSON数据转化成js对象
var res = eval('('+result+')'); console.log(res)
控制台
okay,拿到数据,之后就是按照图表数据格式将其执行进一步操作,这里不再赘述
之后我有尝试这样接受数据
直接使用jq 的 $.ajax 方法 ,然后看控制台
直接可以获得js对象
然而这两种方法为什么会产生这样的差异,我还在百度中
3 细节注意
ichart 图表有一个参数用来控制Y轴显示
我这次的这个项目,在多个页面中用到了图表,但是每一个之间数据差距很大,从10到5000 , 所以在设置纵轴的时候,没有写死,是从数据值中选择最大最小值分别赋值给end_scale start_scale