YUA项目总结

本文介绍了在YUA项目中使用iChart.js进行数据可视化的过程。通过点击日期按钮获取并展示不同时间段的数据波动。主要内容包括iChart的基本展示,数据处理以及细节注意。在数据处理部分,提到了如何将JSON数据转化为JS对象,并比较了两种不同的数据接收方法及其差异。在细节注意环节,强调了在设置Y轴显示时根据实际数据动态调整start_scale和end_scale的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这个项目中用到图表来展示数据,效果图
这里写图片描述

点击日期按钮返回不同时间段的数据波动。

图表是使用的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

这里写图片描述

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值