docloud后台管理项目(前端篇)
以下内容与主题无关,如果不想看可以直接忽视
!--忽视开始--!
给大家推荐一款强大的编辑器,那就是集响应快、体验好、逼格高、功能丰富为一体的sublime text 3。它除了以上特点,还有一个最重要的功能:方便快捷的插件扩展,支持大量插件而且均支持命令行安装,只要一条简单的命令就可以完成插件的安装。想要提高开发效率,sublime是一个很好的选择!
!--忽视结束--!
以下为项目开发时遇到的问题或者学习到的前端技术:
1、height:100%设置无效
解决方法:html,body{margin:0;height:100%}
2、div居中
解决方法:
两种方案
1、第一种情况,div宽度固定的情况下,给div设置width,然后margin:0 auto;
2、第二种情况,div宽度不固定或者说不想给div加宽度限制,给div设置display:inline-block;然后给他的父元素加上text-align:center;
3、纯css实现奇偶行
解决方法:
使用css的:nth-child(odd)选择器就可以了:tr:nth-child(odd){background-color: #eee}
4、css内进行简单运算
解决方法:
使用calc函数:th{width: calc(100%/7);}
5、遍历js对象
解决方法:
for (var k in jsObj) {
console.info("key:" + k + ",value:" + jsObj[k]);
}
6、解决ie Date.getTime兼容性问题
解决方法:
由于ie不兼容 yyyy-mm-dd的日期格式,所以把“-”替换为“/”就可以解决问题
function getTime(dateStr){
dateStr = dateStr.replace("-", "/");
return Date.parse(dateStr);
}
由于是数据分析的后台,所以用到了图表,我所采用的插件是highcharts,一下是使用highcharts的一点经验:
为了方便数据的修改和呈现,一般定义一个全局的参数
//图表参数
var chart = {
chart: {
zoomType: 'x',
spacingRight: 20
},
title: {
text: '曲线图'
},
xAxis: {
type: 'datetime',
title: {
text: '时间'
},
dateTimeLabelFormats: {
second: '%H:%M:%s',
minute: '%d日 %H:%M',
hour: '%m月%d日%H点',
day: '%Y年%m月%d',
week: '%Y-%m-%d',
month: '%Y年%m月',
year: '%Y年'
}
},
yAxis: {
title: {
text: '体温'
}
}
};
里面的参数都见名知意,就不一一解释了,具体可以看相关文档。这里xAxis 里面的type: 'datetime'表示x轴按照时间显示。
这是图表初始化方法:
var ser = [];
var ser = [];
ser[0] = {
type:'line',
name: "参数名",
data: [
["X值","Y值"],
["X值","Y值"],
["X值","Y值"]
]
};
chart.series = ser;
$('#container').highcharts(chart);
X轴按照时间显示的时候X值应该为时间戳,绑定之前记得对数组进行按X轴升序排序。
最新文章
- IIS 8:IIS 入门
- Generate Time Data(普通日期主数据)
- java并发编程系列
- bootstrap 模态 modal 小例子
- 踩的python列表及for循环一个坑儿
- jquery 设置style:display 其实很方便的
- node.js里的forEach()也是异步的吗?
- SPRING IN ACTION 第4版笔记-第二章WIRING BEANS-006-当构造函数有集合时的注入
- Python中__init__方法介绍
- Integer ==与Equals【原创】
- 初步STL集装箱Vector
- Angular回到顶部按钮指令
- 分布式事务解决方案FESCAR
- taro 与uni-app对比
- dom定位的三种元素
- IDEA中自动生成serialVersionUID
- 06-02 Java值传递、数据加密
- 自己写一个java的mvc框架吧(三)
- Oracle 批量修改某个用户下表的表空间
- CUBA 7:崭新的篇章
热门文章
- Nginx源码分析:3张图看懂启动及进程工作原理
- jq页面提示或者页面牵引浏览--页面的指引向导插件
- Lua的面向对象程序设计
- 1. 找出数组中的单身狗OddOccurrencesInArray Find value that occurs in odd number of elements.
- 在Ubuntu平台上创建Cordova Camera HTML5应用
- JavaScript使用正則表達式
- JavaScript的原生引用类型
- Spring自我总结
- Apache Kafka-0.8.1.1源代码编译
- Mongo性能测试-python脚本